Accordion

Un accordion es una lista vertical de headers apilados que muestra u oculta secciones de contenido vinculado bajo demanada de los usuarios.

Composición

El componente de accordion se compone de:

  • Header
    Contiene el título de la sección y es el control que permite mostrar el panel.
  • Icono
    Indica el estado del accordion. Pueden darse dos casos: expanded o collapsed. El chevron, en este caso, apunta hacia abajo para indicar el estado collapsed y hacia arriba para el expanded.
  • Panel
    Muestra la sección de contenido asociado al header.

Demo en vivo

  • Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.

  • Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.

  • Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.

<div class="rds-mb-l03">
  <ul class="rds-accordion">
    <li class="rds-accordion__item">
      <button class="rds-accordion__heading" data-rds-accordion aria-controls="#accordion_1_1" aria-expanded="false">
        Collapsed
        <span class="rds-accordion__heading-icon rds-icon-Arrow_right" aria-hidden="true"></span>
      </button>
      <div class="rds-accordion__content" id="accordion_1_1">
        <div class="rds-mb-l03"><p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p></div>
      </div>
    </li>
    <li class="rds-accordion__item">
      <button class="rds-accordion__heading" data-rds-accordion aria-controls="#accordion_1_2" aria-expanded="true">
        Expanded
        <span class="rds-accordion__heading-icon rds-icon-Arrow_right" aria-hidden="true"></span>
      </button>
      <div class="rds-accordion__content" id="accordion_1_2">
        <div class="rds-mb-l03"><p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p></div>
      </div>
    </li>
    <li class="rds-accordion__item">
      <button class="rds-accordion__heading" data-rds-accordion aria-controls="#accordion_1_3" aria-expanded="false" disabled>
        Disabled
        <span class="rds-accordion__heading-icon rds-icon-Arrow_right" aria-hidden="true"></span>
      </button>
      <div class="rds-accordion__content" id="accordion_1_3">
        <div class="rds-mb-l03"><p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p></div>   
      </div>
    </li>
  </ul>
</div>

Comportamiento

Este componente tiene dos estados principales: collapsed y expanded. El icono que se sitúa al final del accordion indica en qué estado se encuentra. El chevron, en este caso, apunta hacia abajo para indicar el estado collapsed y hacia arriba para el expanded.

Los accordion se encuentran por defecto en el estado collapsed con el panel de contenido cerrado. Empezar en este estado le da al usuario una mejor perspectiva general de la información disponible.

Recomendaciones

  • Ofrece gran cantidad de contenido en un espacio pequeño a través de la revelación progresiva. El título del header muestra al usuario una descripción general del contenido, lo que le permite decidir qué secciones leer.
  • Los accordion pueden hacer que el procesamiento y descubrimiento de información sea más efectivo. Sin embargo, ocultan contenido a los usuarios y es importante tener en cuenta que un usuario puede no darse cuenta o no leer todo el contenido incluido. Si es probable que un usuario lea todo el contenido, es mejor no utilizar este componente, ya que agrega la carga adicional de un clic; en su lugar, es preferible utilizar una página con scroll completo que incluya headers normales.

Alineación y orden

El icono (chevron) se sitúa, por defecto, siempre en el extremo derecho del header. Esto permite alinear la parte inicial del título con el resto de elementos del grid.

Los acordeones se pueden colocar con el contenido de la página principal o dentro de un contenedor, como por ejemplo un módulo lateral.