Language: ENCN

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.