10Accordion
A modified Foundation accordion with collapsing animation. Set the font size for each
header by adding a type class to .accordion-target
(this also affects icon size).
Additionally, you can add an status icon to the accordion heading by adding
.is-valid
or .is-invalid
or is-incomplete
to .accordion-heading
.
-
Title
Content here
-
Title
Content here
-
Position Details
Content here
-
Position Details
(5 remaining)
Content here
-
Position Details
(5 remaining)
Content here
<ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
<a class="accordion-title heading--medium" href="#">
<span class="accordion__heading">Title</span>
</a>
<div id="someID" class="accordion-content" data-tab-content>
Content here
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a class="accordion-title heading--medium" href="#">
<span class="accordion__heading">Title</span>
</a>
<div id="someotherID" class="accordion-content" data-tab-content>
Content here
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a class="accordion-title heading--small" href="#">
<span class="accordion__heading is-valid">Position Details</span>
</a>
<div id="accordionID" class="accordion-content" data-tab-content>
<div class="pane">Content here</div>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a class="accordion-title heading--small" href="#">
<span class="accordion__heading is-invalid">Position Details</span>
<span class="font-weight-normal">(5 remaining)</span>
</a>
<div id="anotheraccordionID" class="accordion-content" data-tab-content>
<div class="pane">Content here</div>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a class="accordion-title heading--small" href="#">
<span class="accordion__heading is-incomplete">Position Details</span>
<span class="font-weight-normal">(5 remaining)</span>
</a>
<div id="yetanotheraccordionID" class="accordion-content" data-tab-content>
<div class="pane">Content here</div>
</div>
</li>
</ul>
<div class="expander js-expander">
<a href="#" class="expander__toggle js-expander__toggle" role="button">
<svg class="expander__indicator svg-icon svg-icon--black" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg>
Some Text
</a>
<ul class="expander__info js-expander__info">
<li>You want a toe? I can get you a toe, believe me.</li>
<li>There are ways, Dude. </li>
<li>You don't wanna know about it, believe me.</li>
</ul>
</div>