Animaciones sencillas con jQuery para esconder y presentar elementos

jQuery .toogle(): ejemplos prácticos. Cómo mostrar y ocultar elementos en una web

Siguiendo con el tema de mostrar y ocultar información, bloques o cualquier otro elemento de una web, vamos a ver ahora algunos ejemplos prácticos para alternar la visibilidad con jQuery.

El método .toggle() proporciona esta funcionalidad. Por ejemplo, se puede utilizar para mostrar y ocultar contenido con animaciones o sin ellas, crear bloques que desaparecen al pulsar sobre ellos (como los avisos de cookies), ocultar paneles de opciones, mostrar respuestas ocultas, esconder información sólo disponible para usuarios registrados, etc.

La manera más simple de utilizar este método sería sin añadirle ningún parámetro:

$('.elemento').toggle();

De todas formas, conviene tener en cuenta que este método .toggle() usado como click especial para alternar funciones ya no está incluido en jQuery desde la versión 1.9 (si se usa como efecto para mostrar y ocultar elementos no hay problema), por lo que es necesario incluir el plugin jQuery Migrate, o bien extraer este método del código fuente y usarlo aparte.

En otras palabras, si utilizas jQuery 1.9 o superior, el método .toggle() no funcionará por sí solo (más información aquí).

Para poder utilizarlo con jQuery 1.9 o versiones posteriores, lo más fácil es utilizar jQuery Migrate. Lo único que hay que hacer es incluir el archivo después de jQuery. Así:

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

La otra solución sería extraer sólo el método $().toggle() del código del plugin y usarlo donde lo necesitemos. La función está definida en el archivo event.js de jQuery Migrate (a partir de la linea 53): “jQuery.fn.toggle = function( fn, fn2 )…”

jQuery Toggle: ejemplos prácticos

Partiendo del esquema anterior, podemos llegar a todo tipo de soluciones. Vamos a ver algunos ejemplos útiles que pueden servir en cualquier página web.

Ejemplo 1: Mostrar y ocultar

En este primer ejemplo, ocultamos la respuesta a una pregunta y hacemos que aparezca pulsando sobre un enlace.

En este caso, los elementos seleccionados se mostrarán y ocultarán inmediatamente, sin ninguna animación, ya que lo que hace jQuery es cambiar la propiedad CSS display de ese elemento, alternando entre display:none y display:block.

Pregunta: ¿Cómo puedo mostrar y ocultar elementos en mi web? (ver respuesta)

Ejemplo 2: Mostrar y ocultar con animación

Para darle un poco más de vida al ejemplo anterior, podemos animar la aparición del bloque definiendo la velocidad con la que queremos que se abra y se cierre.

El método .toggle() anima simultáneamente la altura y la anchura del elemento, por eso la animación se produce en oblicuo, no hacia abajo.

Pregunta: ¿Es complicado animar un bloque con .toggle()? (ver respuesta)

Ejemplo 3: Mostrar y ocultar un vídeo

Lógicamente, en el bloque de contenido oculto podemos incluir cualquier cosa, no sólo texto. Por ejemplo, podemos utilizarlo para mostar un vídeo:

Mostrar vídeo

Ejemplo 4: Alternar visibilidad de varias preguntas y respuestas

Supongamos ahora que tenemos varias preguntas y respuestas. Si en vez de abrir y cerrar un bloque (una respuesta) tenemos varios, tendremos que cambiar un poco el código para que no se abran todas las respuestas a la vez.

En este caso, una de las maneras de conseguirlo sería especificar que se abra únicamente el párrafo siguiente utilizando .next():

Pregunta 1: ¿Dónde puedo encontrar más información sobre .next()? (ver respuesta)

Pregunta 2: ¿Cómo puedo acceder al código de este ejemplo? (ver respuesta)

Pregunta 3: ¿Cómo puedo abrir y cerrar todo a la vez? (ver código)

Mostrar y ocultar todas las respuestas

Ejemplo 5: Cambiar el texto del botón al pulsar sobre él

En los ejemplos anteriores, el texto del botón o enlace que activa la acción de mostrar y ocultar no cambia, lo cual puede confundir al usuario. Al pulsar sobre “Ver vídeo”, “Leer más”, etc. el texto debería cambiar automáticamente por “Ocultar vídeo”, “Colapsar texto” o cualquier descripción que tenga sentido.

Para ello podemos utilizar el método .text(), que se encargará de sustituir el texto del elemento por el que especifiquemos.

Además, en este ejemplo utilizamos .toggle() para alternar dos funciones, ya que lo que queremos no es cambiar una vez el texto sinó alternar entre dos cadenas.

Pregunta: ¿Cómo puedo cambiar el texto de un botón con jQuery?

Ver respuesta

Ejemplo 6: Abrir y cerrar un panel lateral

Como hemos visto en el ejemplo anterior, el método .toggle() nos permite también alternar funciones al pulsar sobre un elemento. La primera función se activa al pulsar por primera vez (y la tercera, quinta…), mientras que la segunda tendrá efecto la segunda vez que pulsamos el botón (y la cuarta, sexta…). Un ejemplo práctico de esto sería mostrar y ocultar un panel lateral:

Mostrar el panel oculto

Este sería el código necesario:

<!-- HTML -->
<div id="panel-oculto" style="display:none;"></div>

<a href="#" id="alternar-panel-oculto">Mostrar el panel oculto</a>
// jQuery
$(document).ready(function(){ 

	$('#alternar-panel-oculto').toggle( 

	    /* 
	    	Primer click.
			Función que descubre un panel oculto
			y cambia el texto del botón.
	    */ 
	    function(e){ 
	        $('#panel-oculto').slideDown();
	        $(this).text('Cerrar el panel');
	        e.preventDefault();
	    }, // Separamos las dos funciones con una coma
	
	    /* 
	    	Segundo click.
			Función que oculta el panel
			y vuelve a cambiar el texto del botón.
		*/
	    function(e){ 
	        $('#panel-oculto').slideUp();
	        $(this).text('Mostrar el panel oculto');
	        e.preventDefault();
	    }

	);

});

Ejemplo 7: Combinando jQuery y WordPress

Estos efectos se pueden combinar con otras maneras de ocultar información, por ejemplo, si utilizamos WordPress, haciendo que sólo tengan acceso al elemento oculto los usuarios registrados.

Si añadimos un condicional en el bloque con la información oculta, podemos hacer que sólo sea accesible para usuarios registrados, para administadores, para usuarios específicos, etc:

Ver contenido premium (sólo usuarios registrados)

<?php 
if ( is_user_logged_in() ) :

	// Contenido premium, solo para usuarios registrados	

else :

	// Mensaje para los que no pueden ver el contenido anterior
	echo 'Lo sentimos, este contenido sólo está disponible para usuarios registrados :-(';

endif;
?>

Entrada relacionada: Cómo animar enlaces internos con jQuery (con y sin WordPress)

Comentarios

  1. Ricardo

    Excelente, muchas gracias.

  2. carlos

    Hola

    Estoy haciendo una web con godaddy.

    Tiene un editor HTML en el que he copiado el codigo del ejemplo 4 pero no me funciona.

    Te agradeceria me dijeras que estoy haciendo mal.

    Muchas gracias!
    Carlos

  3. Daniel

    Hola Carlos.
    Puede ser por muchos motivos: ¿Has incluido jQuery antes del código? ¿Permite el editor HTML pegar Javascript? ¿Aparece algún error en la consola del inspector?

  4. Prof Henry

    Saludos amigos, y felicitaciones, muy valiosa la información. Realmente estoy empezando en esto de la edición HTML, y ahora tengo un reto, y una traba a la vez. Tengo un blog que estoy diseñando para los alumnos, la intención es que ellos puedan acceder a las partituras y a la pista de sonido de cada partitura. La forma de presentarlo es colocando las imagenes de las partituras con un enlace de descarga, para que al hacer clic ellos puedan ver y descargar la partitura, pero también quiero colocar un botón aparte, que al hacer clic el usuario pueda ver las opciones de audio, es decir, un div que contenga las pistas de audio de dicha partitura. Esto pude lograrlo, colocando el reproductor web con las pista de la partitura en un div oculto, el problema viene cuando quiero que sea otro div con otras pistas, no se como hacerlo, si puedes darme una manera de hacerlo estare muy agradecido.

  5. Daniel

    Con jQuery puedes seleccionar fácilmente cualquier elemento de la web para alternar su visibilidad. Si son dos bloques diferentes, tal vez deberías añadir también dos botones, uno para cada bloque.

    Si el problema es que siempre se abre el mismo bloque, tienes que asegurarte de que lo seleccionas de manera más dinámica, por ejemplo, no a través de su ID sinó de su posición.

    Los métodos .next() y .prev() de jQuery suelen ser de gran ayuda en estos casos. Por ejemplo: $(‘.bloque’).find(‘div’).next()…

  6. Suriel

    Muy bien explicado, pero tengo un problema, al implementar el ejemplo 5 o 6 en mi pagina, al previsualizar en navegador, desaparece el botón (link,texto) al que debo hacer click y por lo tanto no funciona.

  7. Daniel

    Hola Suriel. Para poder ayudarte habría que ver el código. Intenta montarlo en algún editor online en el que se pueda guardar y compartir. Por ejemplo este: http://jsfiddle.net/

  8. Santiago

    Daniel que tal?
    Estoy armando un sitio que ofrece detalles de “productos” en los cuales se pueden hacer comentarios. Mi problema está cuando quiero mostrar esos comentarios ya que estos pueden ser largos, pero al principio quiero ver solo una cierta cantidad de caracteres y luego habilitar un botón “ver mas” que expanda todo el texto. Si tenes alguna idea o pique sería de gran ayuda. Muchas gracias y Saludos.

  9. Daniel

    Sí, puedes reducir automáticamente el número de caracteres en los comentarios (con substring) y añadir un botón para alternar entre “Ver más” y “Ver menos” con .toggle().

    Aquí tienes un ejemplo:
    http://jsfiddle.net/taasw8qg/

    De todas formas, ten en cuenta que .toggle() ya no está incluido en jQuery desde la versión 1.9, por lo que conviene usar el plugin jQuery Migrate, o bien extraer este método y usarlo aparte.

    En otras palabras, si utilizas jQuery 1.9 o superior, el método .toggle() no funcionará. Más información aquí:

    https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jqueryfntogglehandler-handler-is-deprecated

  10. Igor

    Buenas! Daniel! ¿Cómo se usa Jquery Migrate? O como se hace si se utiliza Jquery 1.9 o superior?

  11. Daniel

    Hola Igor.
    Lo más fácil es utilizar jQuery Migrate. Lo único que hay que hacer es incluir el archivo después de jQuery.

    Ni siquiera es necesario descargarlo. Puedes enlazar directamente la versión del CDN: https://code.jquery.com/jquery-migrate-1.2.1.min.js

  12. Eduardo

    Hola Daniel. El ejemplo 6 lo copie y lo pegue exactamente igual al suyo, pero por alguna razón el botón desaparece y no me da chance de darle click. Ojo lo subí a este servidor.

    http://uniomotora.com/uniomotora/demo-toggle.html

    Le agradezco la ayuda y quiero felicitarlo por el excelente blog.

  13. Daniel

    Hola Eduardo.
    Lo único que te falta para que funcione es incluir el plugin jQuery Migrate, que es donde está definido el efecto.

    Añádelo justo después de jQuery, así:

    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    

    El problema es que el método .toggle() ya no está incluido en jQuery desde la versión 1.9, por eso hay que utilizar esta extensión que se encarga de incluir código de versiones anteriores.

  14. Oscar

    Hola, excelente trabajo. Estoy implementando el ejemplo 4 pero me surge una Pregunta. Quisiera saber cómo puedo hacer para que al abrir un enlace se cierren todos los demás que estén abiertos. Muchas gracias

  15. Daniel

    Hola Oscar.
    En ese caso, puedes añadir una regla antes de abrir cada respuesta para que seleccione todas las respuestas y las cierre. Aquí tienes un ejemplo simple: http://jsfiddle.net/pf38r7he/1/

  16. Aaron

    Hola Daniel, tengo un problema tengo, varias listas las cuales quiero que se oculten, mi problema es que siempre que doy click, me lanza al top de la página, tendrás alguna sugerencia del porque hace eso?.

    Saludos!

  17. Daniel

    Hola Aaron.
    Seguramente es porque la acción se produce sobre un enlace y como no existe el destino, envía arriba del todo de la página.

    Para evitarlo se suele utilizar event.preventDefault(). Cuando se utiliza este método, la acción por defecto del evento no se produce (es decir, deja de comportarse como un enlace). Fíjate que en casi todos los ejemplos de aquí arriba se anula el enlace con e.preventDefault().

  18. Aaron

    Hola Daniel…

    Estas en lo cierto, no lo tenia contemplado, MUCHAS GRACIAS BRO, ya quedo funcionando…

    Saludos

  19. Rafael

    Hola Daniel,
    Tengo el siguiente inconveniente, por lo que veo para que funcione es necesario utilizar el “migrate” que es compatible hasta con el jquery 1.9.1 y yo actualmente estoy utilizando el jquery 1.11.0 – por esto no me funciona estos ejemplos, mi pregunta es: ¿como se puede lograr el ejemplo 6 con este jquery, en este caso no hay que usar .slideToggler()?

    Gracias por tu ayuda.

  20. Daniel

    Hola Rafael.
    Lo que ya no existe desde la versión 1.9 de jQuery es el método .toggle() usado como click especial para alternar funciones (si se usa como efecto para mostrar y ocultar elementos no hay problema). Hay tres maneras de solucionarlo:

    Una, la más fácil, es añadir el plugin jQuery Migrate, que incluye la funcionalidad eliminada en las versiones recientes. Lo que pasa es que esto añade un archivo más a cargar en la página.

    Otra solución es extraer sólo el método $().toggle() del código del plugin y usarlo donde lo necesitemos. La función está definida en el archivo event.js de jQuery Migrate (a partir de la linea 53): “jQuery.fn.toggle = function( fn, fn2 )…”

    La tercera solución es reescribir el código para conseguir el mismo resultado, por ejemplo con .slidetoggle().

  21. zlm1

    Hola, sabes soy nueva en esto y necesito saber como puedo tener un botón que muestre dos div y al darle en el mismo botón desaparezca solo uno de ellos..alguien sabe como podría hacerlo??

  22. Daniel

    Aquí tienes un ejemplo sencillo de botones para mostrar y ocultar contenido con jQuery sin utilizar toggle(), con la opción de mostrar dos bloques o sólo uno. He incluido comentarios para que sepas para qué sirve cada linea: http://jsfiddle.net/0orzp4u2/

  23. Alfred

    Daniel, uso el ejemplo de “Cambiar el texto al abrir cerrar”, pero no sé adecuar el código con .parent().next() dado tengo varios toggle en la misma página.

    Es decir, cómo combinar los ejemplos 4 i 5. Dónde coloco .parent().next() ?

    $(document).ready(function(){
    $(‘#boto-x’).toggle(
    function(e){ $(‘#x’).slideDown();$(this).parent().next().text(‘Ocultar contingut’);e.preventDefault();},
    function(e){ $(‘#x’).slideUp();$(this).parent().next().text(‘Mostrar contingut’);e.preventDefault();});});

    Gracias de nuevo =)

  24. joaquin guadalupe

    Se agradece mucho me servira para cada dia aprender mas gracias!

  25. Jorge Medina

    Muchas gracias, de verdad me salvaste la vida con esta funcionalidad que ahora que la aprendí, puedo aplicar en mi página.

    Saludos desde La Paz, Bolivia.

  26. alejandro

    Excelentes ejemplos, Te felicito.

  27. Diego Muñoz

    Muy buen aporte, sigue asi!!

  28. Manuel

    Disculpa mi ignorancia, soy nuevo en esto, pero cual sería el código para llamar al jquery del ejemplo 6 (es precioso!!) en una entrada de wordpress??

  29. Daniel

    Hola Manuel.
    El código necesario lo puedes ver justo debajo del ejemplo. Primero habría que crear la estructura HTML (los bloques con sus respectivos IDs y clases) en la entrada (por ejemplo en la plantilla “single.php”) y después incluir las acciones (abrir, cerrar…) con jQuery (por ejemplo, en la plantilla “footer.php”).

    Para que sólo afecte a una entrada determinada, puedes incluir el código HTML y jQuery con un condicional. Así:

    <?php
    $post_id = get_the_ID();
    if ( $post_id == '00' ) { // Sustituir "00" por el ID de la entrada
         // Código que sólo se cargará en la entrada especificada
    }
    ?>
    
  30. Manuel

    Muchas gracias por tu ayuda. Ya hice funcionar el panel, pero por alguna extraña razón no puedo escribir texto dentro de él. Aparece completamente vacío.

  31. Carlos

    Me gustaría saber como ocultar el enlace y que para ser visualizado se tenga que compartir en facebook, twitter, etc? :D Todo ésto para Blogger.

  32. Luis Angel

    Hola Daniel
    He buscado en diversas fuentes, sin encontrar solución a mi problema…

    Tengo varios DIVs que se muestran y ocultan al hacer clic en cada icono, pero debo volver a dar clic al mismo icono, para que se oculte ese DIV y me muestre el otro.

    ¿Como puedo hacer que se oculten los demas, cuando entra a un DIV?

    Agradeceré tu respuesta.

  33. Jose

    Hola Daniel!

    Te estás ganando el cielo!!

    Todo funciona al pelo!

    Mil Gracias!!!

  34. Daniel

    Hola Luis Angel.
    Hay varias maneras de conseguir lo que comentas. Aquí tienes un ejemplo simple para mostrar un bloque y ocultar el resto con jQuery:
    https://jsfiddle.net/byLr9hLv/

  35. Roddy

    Hola daniel:

    te comento que me sirvió bastante tu código y me salvó la vida, pero tengo un problema con el numero 2, la situación es la siguiente: tengo 12 botones con la cual estan enumerados asi:

    $(document).ready(function(){ 
    	$('#alternar-respuesta-ej1').on('click',function(){
    		$('#respuesta-ej1').toggle('slow');
    	});
    });
    $(document).ready(function(){ 
    	$('#alternar-respuesta-ej2').on('click',function(){
    		$('#respuesta-ej2').toggle('slow');
    	});
    });
    

    Al darle click a uno se abre, pero si le doy click al otro y al otro y al otro, se mantienen todos abiertos, mi idea es que si abro el 1 y despues le doy click al 5 se cierre el 1. No se si me expliqué.

    Saludos :)

  36. Adolfo

    Hola, no soy nada experto en jQuery pero a ver si me puedes ayudar con este caso de una web que tengo en WordPress. En el código tiene la opción de “toogle” para ocultar o visualizar el Google Map, que en el caso, me interesa que no se oculte, que esté siempre visible ¿Cómo lo hago?

    Este es el código:

    *Ubicarnos en Google Map

  37. Adolfo

    Perdón, el código aparece convertido automático es:

    —- href=”#” class=”gmap-toggle”> Ubicarnos en Google Map —-

    *He omitido las etiquetas

  38. Adrian

    Daniel estuve probando en el ejemplo de multiples preguntas colocar un icono flecha abajo en cada pregunta y que cuando esté abierto coloque flecha arriba. Pero no logro que funcione. Podría informarme como lo harías?

  39. Adrian

    Ya está, ya me funciona. Gracias por las ideas.

  40. Xemaker

    Hola Daniel;
    Mil gracias por el ejemplo, me ha servido muchisimo.
    Unicamente queria preguntarte, al animar un bloque con .toggle el contenido oculto/desplegable lo reconoce google para el posicionamiento SEO?

    Mil gracias de nuevo.

  41. Daniel

    Hola Xemaker.
    Según las directrices de calidad de Google sobre texto y enlaces ocultos, no todo el texto oculto se considera engañoso. Siempre y cuando el contenido sea accesible, el buscador lo reconoce, aunque probablemente no le dé el mismo peso que a los contenidos visibles por defecto.

  42. Carmen

    Excelente! Gracias.

  43. Nilton

    Estimado amigo, tengo el siguiente problema: cuando están fuera de la tabla funciona perfectamente pero cuando lo ingreso dentro de un ya no se cierra el anterior. Todos se quedan abiertos. Si puedes ayudarme. Gracias.

    #b1-bloque, #b2-bloque, #b3-bloque { display: none; width: 80px; height: 50px; background: #eee; margin: 10px; padding: 10px; text-align: center; }
    .nota { margin: 50px 0 0; }
    .nota, .nota a { font-size: 11px; color: #999; }
    
    <a href="#" rel="nofollow">Mostrar B1</a>
    Bloque 1
    <a href="#" rel="nofollow">Mostrar B2</a>
    Bloque 2
    <a href="#" rel="nofollow">Mostrar B3</a>
    Bloque 1
    
    $(document).ready(function() { 
        var AbrirCerrar = $('.AbrirCerrar');    
        AbrirCerrar.on('click',function(e){
            $("#" + $(this).attr('id') + '-bloque').show().siblings('div').hide();
            e.preventDefault();
        });
    });
    
  44. Leonel

    Buenas Daniel. Tengo una duda, es la siguiente:

    Tengo mi boton hecho como el ejemplo 2… Le agregue el event.preventDefault(); para que no me mande al top al hacer clic. Todo bien en Opera, pero en Firefox me sigue enviando al top. Podrias indicarme porque ocurre eso.

  45. Armando

    Hola que tal, tengo una pregunta sobre el ejemplo 3, el del video. Lo que pasa esque lo reproduzco pero cuando lo oculto se sigue escuchando, ese es el problema que nomas lo oculta. Como le hago para que se reinicie, es decir, para cuando le de otra vez en mostrar y ocultar el video se ponga en su estado normal y no se siga escuchando. No se si me doy a entender.

  46. Daniel

    Hola Armando.
    En ese caso, para parar el vídeo al ocultar el bloque, tendrías que utilizar la API de Youtube (Controles de reproducción y configuración del reproductor) e integrarlo en las consultas con jQuery. Aquí comentan algunas soluciones.

  47. Daniel

    Hola Leonel.
    Lo que hace “preventdefault” es eliminar la acción por defecto del enlace, por lo que no debería enviar arriba de la página. Prueba con el ejemplo incluido en la documentación oficial, para ver si te funciona bien:
    https://api.jquery.com/event.preventdefault/

  48. Álvaro

    Hola, Hola. Estoy haciendo en mi sito una página con mucha información y por eso utilizo varios toggles. El problema es que necesito que al activar un toggle y expandir toda la información la pantalla se posicione al principio de esa misma información, ya que si no no se ve que está abierta. He probado con window.location y me funciona en Chrome, pero no en IE no Firefox. ¿Podrías ayudarme?

  49. Vicente

    Hola! Necesito ayuda. Esto este código en la home para que el texto quede bajo la etiqueta de leer más, pero ha dejado de funcionar sin hacer nada.

    <a href=”#” rel=”nofollow”>Leer más…</a>

    ¿Cómo puedo arreglarlo?
    Gracias.

  50. Hola amigo, excelentes tus ejemplo. He usado el N° 5, pero tengo el problema que al cargar la página aparece el div desplegado por defecto, y el texto del botón (link en mi caso), aparece el texto por defecto que lleva la etiqueta <a>, ahora al hacerle clic, carga el texto que debe, y funciona perfectamente. No se que estaré haciendo mal, de antemano gracias.

  51. Andres palacios

    Muy bueno el aporte. Gracias!

  52. Ruben

    Hola, ando buscando algo parecido a las publicaciones del facebook, es decir cuando aparecen las imagenes con un texto por encima de la imagen, como puede hacerse, si me facilitan un codigo o algo, gracias.

  53. Juan

    Hola. Estoy utilizando un evento toggle en mi sitio para un boton de ver más, lo que muestra parte del contenido oculto. Pero tengo un problema porque recarga la pagina. Alguna idea que puede ser?

  54. Cesar

    Gracias, estaba realizando un menú tipo acordeón, y me ayudo mucho. Gracias.

  55. Giovanni

    Muchas gracias. Yo use el numero 6, y leyendo los comentarios me di cuenta que como tenia una version mas actual del jquery necesitaba el migrate: lo agrege antes del termino del body y listo de 10 :D

  56. Anadela

    ¡¡Excelentes explicaciones Daniel, Felicidades y Gracias!!

Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)