Accordion List Vue Component

Accordion List is not a separate component, but just a particular case of using <f7-list>, <f7-list-item> and <f7-accordion-content> components.

Usage example

<f7-list accordion>
  <f7-list-item accordion-item title="Accordion Item 1">
    <f7-accordion-content>
      <f7-block>
        <p>Accordion Item 1 Content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.</p>
      </f7-block>
    </f7-accordion-content>
  </f7-list-item>
  <f7-list-item accordion-item title="Accordion Item 2">
    <f7-accordion-content>
      <f7-block>
        <p>Accordion Item 2 Content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.</p>
      </f7-block>
    </f7-accordion-content>
  </f7-list-item>
</f7-list>

Renders to:

<div class="list-block accordion-list">
  <ul>
    <li class="accordion-item">
      <a href="#" class="item-link">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Accordion Item 1</div>
          </div>
        </div>
      </a>
      <div class="accordion-item-content">
        <p>Accordion Item 1 Content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.</p>
      </div>
    </li>
    <li class="accordion-item">
      <a href="#" class="item-link">
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Accordion Item 2</div>
          </div>
        </div>
      </a>
      <div class="accordion-item-content">
        <p>Accordion Item 2 Content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.</p>
      </div>
    </li>
  </ul>
</div>

Events

The following events are avialiable on <f7-list-item> component whith enable accordion-item:

Event	Description
accordion:open	Event will be triggered when accordion content starts its opening animation.
accordion:opened	Event will be triggered after accordion content completes its opening animation.
accordion:close	Event will be triggered when accordion content starts its closing animation.
accordion:closed	Event will be triggered after accordion content completes its closing animation.