Accordion Component - sirthxalot/vue-foundation-components GitHub Wiki

Accordions are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.

Basics

The default markup in order to generate an accordion, will look like the following:

<accordion>
  <pane active="">
    <pane-title>Accordion Title</pane-title>
    <pane-content>
      You content goes here ...
    </pane-content>
  </pane>
</accordion>

So lets take a look how the rendered markup will look like:

<ul class="accordion" data-accordion="">
  <li class="accordion-item is-active" data-accordion-item="">
    <a href="#" class="accordion-title">Accordion Title</a>
    <div class="accordion-content" data-tab-content="">
      You content goes here ...
    </div>
  </li>
</ul>

Pane active="" Attribut

To mark which pane should be open by default, add the attribute active="" to that pane:

<pane active="">
  ...
</pane>

Allow Multi Expand

By default, only one pane of an accordion can be open at a time. This can be changed by setting the multiExpand="true" attribute to the accordion:

<accordion multiExpand="true">
  ...
</accordion>

All Closable

By default, at least one pane in an accordion must be open. This can be changed by setting the allClosable="true" attribute to the accordion:

<accordion allClosable="true">
  ...
</accordion>
⚠️ **GitHub.com Fallback** ⚠️