Accordion

Before using this component, you might want to read our article about Accordions first. Please use the code samples below, not the generated code! The component adds a close button into the structure that isn't required in the initial markup.

Note: Ensure all ID's are unique on buttons and panels as this is required for accessibility

Simple accordion

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • Reprehenderit consequat pariatur eu voluptate enim qui cillum nostrud dolore aliquip Lorem. Do laboris labore eiusmod eu magna in ut. Veniam dolor quis eu sit in. Laboris amet aute minim deserunt reprehenderit adipisicing proident.

  • Laboris esse sunt nulla commodo magna aliqua est dolore labore labore in id cillum. Laborum est adipisicing duis officia anim commodo fugiat duis. Id veniam do sint cillum voluptate. Ullamco reprehenderit laboris ea culpa laborum amet irure. Deserunt magna laboris id commodo. Ad minim esse aute ex in sint cillum in Lorem voluptate est. Incididunt qui nostrud non ad. Culpa eiusmod reprehenderit irure eiusmod. Officia commodo excepteur cupidatat veniam dolor duis cillum id officia ut dolore. Incididunt voluptate aliquip laborum proident laborum amet deserunt ut nostrud nulla labore do officia proident. Enim id esse reprehenderit irure ullamco consectetur aliquip laborum fugiat proident. Non velit ea et esse Lorem occaecat occaecat excepteur incididunt. Commodo adipisicing amet aute do deserunt id laborum nulla. Ut aute exercitation irure ullamco sunt fugiat occaecat duis fugiat pariatur et laboris. Eu proident labore dolore minim anim ad fugiat labore est. Irure nostrud esse id et incididunt cupidatat consectetur consequat adipisicing culpa. Excepteur dolore deserunt nulla non ea elit eiusmod ea eiusmod incididunt exercitation. Mollit dolore veniam quis excepteur exercitation excepteur elit pariatur reprehenderit id.

Single open accordion

Use data-single-focus="true" to only allow one accordion to be open at a time.

Optionally, use data-scroll-on-open="true" for auto scrolling on opening a panel.

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • Reprehenderit consequat pariatur eu voluptate enim qui cillum nostrud dolore aliquip Lorem. Do laboris labore eiusmod eu magna in ut. Veniam dolor quis eu sit in. Laboris amet aute minim deserunt reprehenderit adipisicing proident.

  • Laboris esse sunt nulla commodo magna aliqua est dolore labore labore in id cillum. Laborum est adipisicing duis officia anim commodo fugiat duis. Id veniam do sint cillum voluptate. Ullamco reprehenderit laboris ea culpa laborum amet irure. Deserunt magna laboris id commodo. Ad minim esse aute ex in sint cillum in Lorem voluptate est. Incididunt qui nostrud non ad. Culpa eiusmod reprehenderit irure eiusmod. Officia commodo excepteur cupidatat veniam dolor duis cillum id officia ut dolore. Incididunt voluptate aliquip laborum proident laborum amet deserunt ut nostrud nulla labore do officia proident. Enim id esse reprehenderit irure ullamco consectetur aliquip laborum fugiat proident. Non velit ea et esse Lorem occaecat occaecat excepteur incididunt. Commodo adipisicing amet aute do deserunt id laborum nulla. Ut aute exercitation irure ullamco sunt fugiat occaecat duis fugiat pariatur et laboris. Eu proident labore dolore minim anim ad fugiat labore est. Irure nostrud esse id et incididunt cupidatat consectetur consequat adipisicing culpa. Excepteur dolore deserunt nulla non ea elit eiusmod ea eiusmod incididunt exercitation. Mollit dolore veniam quis excepteur exercitation excepteur elit pariatur reprehenderit id.

Opened accordion

You can set an accordion to be opened by default by adding the accordion__item--opened class to the li element. Note: do not remove the accordion__item class.

<li class="accordion__item accordion__item--opened">...</li>

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • Reprehenderit consequat pariatur eu voluptate enim qui cillum nostrud dolore aliquip Lorem. Do laboris labore eiusmod eu magna in ut. Veniam dolor quis eu sit in. Laboris amet aute minim deserunt reprehenderit adipisicing proident.

  • Laboris esse sunt nulla commodo magna aliqua est dolore labore labore in id cillum. Laborum est adipisicing duis officia anim commodo fugiat duis. Id veniam do sint cillum voluptate. Ullamco reprehenderit laboris ea culpa laborum amet irure. Deserunt magna laboris id commodo. Ad minim esse aute ex in sint cillum in Lorem voluptate est. Incididunt qui nostrud non ad. Culpa eiusmod reprehenderit irure eiusmod. Officia commodo excepteur cupidatat veniam dolor duis cillum id officia ut dolore. Incididunt voluptate aliquip laborum proident laborum amet deserunt ut nostrud nulla labore do officia proident. Enim id esse reprehenderit irure ullamco consectetur aliquip laborum fugiat proident. Non velit ea et esse Lorem occaecat occaecat excepteur incididunt. Commodo adipisicing amet aute do deserunt id laborum nulla. Ut aute exercitation irure ullamco sunt fugiat occaecat duis fugiat pariatur et laboris. Eu proident labore dolore minim anim ad fugiat labore est. Irure nostrud esse id et incididunt cupidatat consectetur consequat adipisicing culpa. Excepteur dolore deserunt nulla non ea elit eiusmod ea eiusmod incididunt exercitation. Mollit dolore veniam quis excepteur exercitation excepteur elit pariatur reprehenderit id.

Tight accordion

Use the class accordion--tight to remove the inner padding of the content area.

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • Aliquip eu consequat dolore fugiat tempor veniam non velit pariatur eu cupidatat. Nulla Lorem eu est deserunt minim. Et exercitation reprehenderit culpa consequat adipisicing dolor ad quis velit anim. Sunt aliquip irure dolore officia labore proident adipisicing do.

Nested accordion

You can nest an accordion inside another accordion.

    • Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.

Linked accordion

You may want an item in the accordion to link to another page. You can do this by changing the accordion__title from a span to an a element.

Alternate accordion

Use the class accordion--alt to choose a different theme.

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.