Skip to main content

Accordion

Information: Documentation incomplete

This component still requires documentation.

Use the accordion component to allow users to expand and collapse additional content related to a heading.

Examples

Default

View HTML
<div class="uhb-c-accordion">
  <div class="uhb-c-accordion__item">
    <a class="uhb-c-accordion__toggle" href="#accordion-1" aria-controls="accordion-1" aria-expanded="false">
      <svg class="uhb-c-icon  uhb-c-icon--expand" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
        <path class="vertical" d="M14 3H10V21H14V3Z"/>
        <path d="M3 10L3 14L21 14V10L3 10Z"/>
      </svg>
      <h2 class="uhb-c-accordion__heading">Accordion heading 1</h2>
    </a>
    <div class="uhb-c-accordion__content" id="accordion-1" style="height: 0px; overflow: hidden;">
      <div class="uhb-c-accordion__content-inner" style="visibility: hidden;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam earum, incidunt omnis voluptatum debitis voluptate iste soluta? Molestiae, esse, saepe eos, perspiciatis error ut quisquam voluptates cumque aliquam aperiam accusantium?</p>
      </div>
    </div>
  </div>
  <div class="uhb-c-accordion__item">
    <a class="uhb-c-accordion__toggle" href="#accordion-2" aria-controls="accordion-2" aria-expanded="false">
      <svg class="uhb-c-icon  uhb-c-icon--expand" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
        <path class="vertical" d="M14 3H10V21H14V3Z"/>
        <path d="M3 10L3 14L21 14V10L3 10Z"/>
      </svg>
      <h2 class="uhb-c-accordion__heading">Accordion heading 2</h2>
    </a>
    <div class="uhb-c-accordion__content" id="accordion-2" style="height: 0px; overflow: hidden;">
      <div class="uhb-c-accordion__content-inner" style="visibility: hidden;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam earum, incidunt omnis voluptatum debitis voluptate iste soluta? Molestiae, esse, saepe eos, perspiciatis error ut quisquam voluptates cumque aliquam aperiam accusantium?</p>
      </div>
    </div>
  </div>
  <div class="uhb-c-accordion__item">
    <a class="uhb-c-accordion__toggle" href="#accordion-3" aria-controls="accordion-2" aria-expanded="false">
      <svg class="uhb-c-icon  uhb-c-icon--expand" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
        <path class="vertical" d="M14 3H10V21H14V3Z"/>
        <path d="M3 10L3 14L21 14V10L3 10Z"/>
      </svg>
      <h2 class="uhb-c-accordion__heading">Accordion heading 3</h2>
    </a>
    <div class="uhb-c-accordion__content" id="accordion-3" style="height: 0px; overflow: hidden;">
      <div class="uhb-c-accordion__content-inner" style="visibility: hidden;">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam earum, incidunt omnis voluptatum debitis voluptate iste soluta? Molestiae, esse, saepe eos, perspiciatis error ut quisquam voluptates cumque aliquam aperiam accusantium?</p>
      </div>
    </div>
  </div>
</div>