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: