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.

Show Markup 

<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>
Some Text
  • You want a toe? I can get you a toe, believe me.
  • There are ways, Dude.
  • You don't wanna know about it, believe me.
Show Markup 

<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>