Acordeones
Un acordeón permite organizar el contenido en bloques colapsables, de manera que el usuario pueda visualizar solamente los bloques que le interesan en cada momento.
Se utilizará un elemento <div class="ulpgcds-accordion"> para englobar todo el contenido del acordeón y un elemento <h3> para el título de cada apartado.
Información personal
Ejemplo del contenido asociado a un elemento acordeón en su primera opción.
Temario
Ejemplo del contenido asociado a un elemento acordeón en su segunda opción.
Información personal
Ejemplo del contenido asociado a un elemento acordeón en su tercera y última opción.
- HTML
- JS
<div class="ulpgcds-accordion">
<h3>Información personal</h3>
<p>Ejemplo del contenido asociado a un elemento acordeón en su primera opción.</p>
<h3>Temario</h3>
<p>Ejemplo del contenido asociado a un elemento acordeón en su segunda opción.</p>
<h3>Información personal</h3>
<p>Ejemplo del contenido asociado a un elemento acordeón en su tercera y última opción.</p>
</div> Alternativamente podemos usar elementos <h2> en lugar de <h3> para el título de cada apartado. Esto es útil cuando en la página no tenemos elementos <h2>, así mantenemos la secuencias en los niveles de encabezado, tal y como dicta las normas de accesibiidad.
Información personal
Ejemplo del contenido asociado a un elemento acordeón en su primera opción.
Temario
Ejemplo del contenido asociado a un elemento acordeón en su segunda opción.
Información personal
Ejemplo del contenido asociado a un elemento acordeón en su tercera y última opción.
- HTML
- JS
<div class="ulpgcds-accordion">
<h2>Información personal</h2>
<p>Ejemplo del contenido asociado a un elemento acordeón en su primera opción.</p>
<h2>Temario</h2>
<p>Ejemplo del contenido asociado a un elemento acordeón en su segunda opción.</p>
<h2>Información personal</h2>
<p>Ejemplo del contenido asociado a un elemento acordeón en su tercera y última opción.</p>
</div> También se permite que el contenido de cada elemento de acordeón se encuentre dentro de un <div>. Ello nos facilita mantener estructuras complejas en el contenido.
Información personal
Ejemplo del contenido asociado a un elemento acordeón en su primera opción.
Temario
Ejemplo del contenido asociado a un elemento acordeón en su segunda opción.
Información personal
Ejemplo del contenido asociado a un elemento acordeón en su tercera y última opción.
- HTML
- JS
<div class="ulpgcds-accordion">
<h3>Información personal</h3>
<div>
<p>Ejemplo del contenido asociado a un elemento acordeón en su primera opción.</p>
</div>
<h3>Temario</h3>
<div>
<p>Ejemplo del contenido asociado a un elemento acordeón en su segunda opción.</p>
</div>
<h3>Información personal</h3>
<div>
<p>Ejemplo del contenido asociado a un elemento acordeón en su tercera y última opción.</p>
</div>
</div> Uso del componente
Los acordeones son un componente increíblemente útil que permite condensar grandes cantidades de contenido en un espacio muy limitado. Esto es lo hace especialmente valioso en dispositivos móviles o dónde se desee reducir la profundidad de la página.
Gracias a este componente se puede ofrecer contenido al usuario evitando que este se sienta sobrepasado por la información y permitiéndole decidir el contenido que desea leer basándose en el título de cada elemento.
Esta técnica, conocida como divulgación progresiva, ofrece al usuario una información mínima que describa un contenido más complejo y le permite abrir el acordeón para leer el resto del contenido si este fuera de su interés.
Buenas prácticas:
- No emplee el acordeón para información que necesite ser comparada.
- Es importante que el título de cada sección sea los más corto y conciso posible.
- Evite anidar acordeones dentro de acordeones, esta práctica puede afectar a la experiencia de los usuarios:
- Mantenga una estructura jerárquica de contenidos clara. Por ejemplo, título - subtítulo - párrafo.
- No utilice este componente para crear galerías de imágenes.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| .ulpgcds-accordion | Activa automáticamente el contenido en modo acordeón |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema, pudiendo afectar a la experiencia de los usuarios.
Cuando el acordeón se encuentra desplegado, se mantendrá la misma interacción sin alterar el contenido desplegado.
No anide los los acordeones, piense en mejores formas de distribuir el contenido.
