Accordion

The Accordion component is designed to organize content in a collapsible manner, facilitating efficient use of screen space while providing a structured layout. It enables users to expand or collapse sections of content as needed, promoting a streamlined user experience.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

Example

Header

Fatalis advena absolute promissios rumor est.

Header

Fatalis advena absolute promissios rumor est.

Header

Fatalis advena absolute promissios rumor est.

<div class="nj-accordion">
  <details class="nj-accordion-item">
    <summary>
      <span class="nj-accordion-item__label">Header</span>
      <span aria-hidden="true" class="material-icons nj-icon-material nj-accordion-item__toggle">expand_more</span>
    </summary>
    <p class="nj-accordion-item__content">Fatalis advena absolute promissios rumor est.</p>
  </details>
  <details class="nj-accordion-item">
    <summary>
      <span class="nj-accordion-item__label">Header</span>
      <span aria-hidden="true" class="material-icons nj-icon-material nj-accordion-item__toggle">expand_more</span>
    </summary>
    <p class="nj-accordion-item__content">Fatalis advena absolute promissios rumor est.</p>
  </details>
  <details class="nj-accordion-item">
    <summary>
      <span class="nj-accordion-item__label">Header</span>
      <span aria-hidden="true" class="material-icons nj-icon-material nj-accordion-item__toggle">expand_more</span>
    </summary>
    <p class="nj-accordion-item__content">Fatalis advena absolute promissios rumor est.</p>
  </details>
</div>

Components-status

Autocomplete