Accordion Vue

Accordion Vue component represents Framework7's Accordion component.

Usage examples

Accordion

<f7-accordion>
  <!-- Item 1 -->
  <f7-accordion-item>
    <f7-accordion-toggle>Item 1</f7-accordion-toggle>
    <f7-accordion-content>
      Item 1 content...
    </f7-accordion-content>
  </f7-accordion-item>
  <!-- Item 2 -->
  <f7-accordion-item>
    <f7-accordion-toggle>Item 2</f7-accordion-toggle>
    <f7-accordion-content>
      Item 2 content...
    </f7-accordion-content>
  </f7-accordion-item>
</f7-accordion>

Renders to:

<div class="accordion-list">
  <!-- Item 1 -->
  <div class="accordion-item">
    <div class="accordion-item-toggle">Item 1</div>
    <div class="accordion-item-content">
      Item 1 content...
    </div>
  </div>
  <!-- Item 2 -->
  <div class="accordion-item">
    <div class="accordion-item-toggle">Item 2</div>
    <div class="accordion-item-content">
      Item 2 content...
    </div>
  </div>
</div>

Separate Collapsible

If you want to use single separate collapsible element you may just omit "f7-accordion" wrapper element:

<!-- Single collapsible element -->
<f7-accordion-item>
  <f7-accordion-toggle>Item 1</f7-accordion-toggle>
  <f7-accordion-content>
    Item 1 content...
  </f7-accordion-content>
</f7-accordion-item>

<!-- Another separate collapsible element -->
<f7-accordion-item>
  <f7-accordion-toggle>Item 2</f7-accordion-toggle>
  <f7-accordion-content>
    Item 2 content...
  </f7-accordion-content>
</f7-accordion-item>

Renders to:

<!-- Single collapsible element -->
<div class="accordion-item">
  <div class="accordion-item-toggle">Item 1</div>
  <div class="accordion-item-content">
    Item 1 content...
  </div>
</div>

<!-- Another separate collapsible element -->
<div class="accordion-item">
  <div class="accordion-item-toggle">Item 2</div>
  <div class="accordion-item-content">
    Item 2 content...
  </div>
</div>

Accordion Item Events