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>