A collapsible content area that allows users to expand and reveal hidden information, helping to organize and manage large amounts of content in a compact space.
The accordion leverages the @10up/component-accordion npm package from 10up. While our design system already includes this package and its configuration, you can find additional details in the official documentation below.
The @10up/component-accordion npm package relies on specific class names to ensure proper functionality, such as managing the toggle behavior between accordion headers and content. Additionally, the icons within the accordion component are integrated using the same setup as the existing icon component, ensuring consistency in design and functionality across the system. Below is an example and the required HTML structure for implementing the accordion component:
This is the accordion content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis dignissim sollicitudin. Fusce sodales ex sed feugiat scelerisque. Suspendisse sagittis tristique auctor. Duis sed metus condimentum, condimentum dolor vitae, eleifend sapien. Aenean blandit bibendum diam, tempor rutrum urna rhoncus ac. Duis ut lectus sem. Fusce ac nisl sed nunc volutpat fermentum at in eros. In tincidunt id erat condimentum placerat. In venenatis sem eget odio feugiat, consequat ullamcorper risus pellentesque.
This is the accordion content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis dignissim sollicitudin. Fusce sodales ex sed feugiat scelerisque. Suspendisse sagittis tristique auctor. Duis sed metus condimentum, condimentum dolor vitae, eleifend sapien. Aenean blandit bibendum diam, tempor rutrum urna rhoncus ac. Duis ut lectus sem. Fusce ac nisl sed nunc volutpat fermentum at in eros. In tincidunt id erat condimentum placerat. In venenatis sem eget odio feugiat, consequat ullamcorper risus pellentesque.
Example HTML
<section class="bt1d-accordion">
<!-- First accordion item -->
<button type="button" class="bt1d-accordion__header accordion-header">
<span class="bt1d-accordion__title">Accordion Title</span>
<span class="bt1d-accordion__icon bt1d-icon-open">
<svg class="bt1d-icon" role="img" aria-label="Expand Icon">
<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-minus"></use>
</svg>
</span>
<span class="bt1d-accordion__icon bt1d-icon-close">
<svg class="bt1d-icon" role="img" aria-label="Collapse Icon">
<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-plus"></use>
</svg>
</span>
</button><!--/accordion-header-->
<div class="bt1d-accordion__content accordion-content">
<p>This is the accordion content.</p>
</div><!--/accordion-content-->
<!-- Second accordion item -->
<button type="button" class="bt1d-accordion__header accordion-header">
<span class="bt1d-accordion__title">Accordion Title</span>
<span class="bt1d-accordion__icon bt1d-icon-open">
<svg class="bt1d-icon" role="img" aria-label="Expand Icon">
<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-minus"></use>
</svg>
</span>
<span class="bt1d-accordion__icon bt1d-icon-close">
<svg class="bt1d-icon" role="img" aria-label="Collapse Icon">
<use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-plus"></use>
</svg>
</span>
</button><!--/accordion-header-->
<div class="bt1d-accordion__content accordion-content">
<p>This is the accordion content.</p>
</div><!--/accordion-content-->
<!-- Additional accordion items follow the same structure -->
</section>Key Class Names
If you’re stuck or need assistance, don’t hesitate to reach out to our support team for guidance.