hx-accordion component is useful for reducing vertical space with large amounts of information. The default functionality of the component is to only display one accordion-panel body at a time, however, with the expandable property, the accordion-panel can remain open until explicitly closed.
<ul class="hx-accordion">
<li class="hx-accordion-container is-active">
<a class="hx-accordion-header">
<div class="header-title">Item 1</div>
<div class="header-icon">
<i class="hx-icon is-small icon-angle-down" style="display: none"></i>
<i class="hx-icon is-small icon-angle-up"></i>
</div>
</a>
<div class="hx-accordion-body">
<div class="hx-accordion-body-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero mi, fermentum non eleifend eu, scelerisque ut risus. Nullam accumsan metus a magna pretium, vitae malesuada nisl sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac eros sit amet diam mattis porttitor ut vitae nulla. Nulla non ligula mattis, hendrerit urna eu, aliquet mauris. Sed vulputate tempor mauris at aliquam. Integer porta nibh tincidunt tortor tincidunt, vel dignissim quam dignissim.</p>
</div>
</div>
</li>
<li class="hx-accordion-container">
<a class="hx-accordion-header">
<div class="header-title">Item 2</div>
<div class="header-icon">
<i class="hx-icon is-small icon-angle-down"></i>
<i class="hx-icon is-small icon-angle-up" style="display: none"></i>
</div>
</a>
<div class="hx-accordion-body" style="height: 0">
<div class="hx-accordion-body-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero mi, fermentum non eleifend eu, scelerisque ut risus. Nullam accumsan metus a magna pretium, vitae malesuada nisl sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac eros sit amet diam mattis porttitor ut vitae nulla. Nulla non ligula mattis, hendrerit urna eu, aliquet mauris. Sed vulputate tempor mauris at aliquam. Integer porta nibh tincidunt tortor tincidunt, vel dignissim quam dignissim.</p>
</div>
</div>
</li>
<li class="hx-accordion-container">
<a class="hx-accordion-header">
<div class="header-title">Item 3</div>
<div class="header-icon">
<i class="hx-icon is-small icon-angle-down"></i>
<i class="hx-icon is-small icon-angle-up" style="display: none"></i>
</div>
</a>
<div class="hx-accordion-body" style="height: 0">
<div class="hx-accordion-body-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero mi, fermentum non eleifend eu, scelerisque ut risus. Nullam accumsan metus a magna pretium, vitae malesuada nisl sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac eros sit amet diam mattis porttitor ut vitae nulla. Nulla non ligula mattis, hendrerit urna eu, aliquet mauris. Sed vulputate tempor mauris at aliquam. Integer porta nibh tincidunt tortor tincidunt, vel dignissim quam dignissim.</p>
</div>
</div>
</li>
</ul>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero mi, fermentum non eleifend eu, scelerisque ut risus. Nullam accumsan metus a magna pretium, vitae malesuada nisl sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac eros sit amet diam mattis porttitor ut vitae nulla. Nulla non ligula mattis, hendrerit urna eu, aliquet mauris. Sed vulputate tempor mauris at aliquam. Integer porta nibh tincidunt tortor tincidunt, vel dignissim quam dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero mi, fermentum non eleifend eu, scelerisque ut risus. Nullam accumsan metus a magna pretium, vitae malesuada nisl sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac eros sit amet diam mattis porttitor ut vitae nulla. Nulla non ligula mattis, hendrerit urna eu, aliquet mauris. Sed vulputate tempor mauris at aliquam. Integer porta nibh tincidunt tortor tincidunt, vel dignissim quam dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero mi, fermentum non eleifend eu, scelerisque ut risus. Nullam accumsan metus a magna pretium, vitae malesuada nisl sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac eros sit amet diam mattis porttitor ut vitae nulla. Nulla non ligula mattis, hendrerit urna eu, aliquet mauris. Sed vulputate tempor mauris at aliquam. Integer porta nibh tincidunt tortor tincidunt, vel dignissim quam dignissim.