HTML5 incorpora de manera nativa dos etiquetas, details y summary, que permiten interactuar con secciones de contenido desplegables y colapsables (expandir o contraer información haciendo clic en un título).

Nosotros agregamos ese recurso a nuestro markdown para que cualquier usuario redactor, editor o maquetador pueda utilizarla en el body de los contenidos página, página de libro o área.

La información dentro del componente debe ser breve para reducir el scroll por parte del usuario.

Si tenés que presentar un contenido muy extenso, no uses este recurso, sino las anclas, que a quienes visitan el sitio les resultarán más fáciles de navegar en cualquier dispositivo.

El componente tienen dos configuraciones:

• details-close: por defecto muestra el recurso colapsado;
• details-open: por defecto muestra el contenido expandido

Contenido colapsado (details-close)

Ejemplo

Código

[[details-close{[Título del contenido colapsado][

Aquí escribís el texto del componente, puede tener más de un párrafo, aunque no es recomendable por usabilidad.

]}]]

Contenido desplegado (details-open)

Ejemplo

Código

[[details-open{[Título del contenido desplegado][

Texto dentro del componente, puede tener más de un párrafo, aunque no es recomendable.

]}]]