Accordion Vue Component

Accordion Vue component represents Framework7's Accordion component.

Accordion Components

There are following components included:

  • f7-accordion
  • f7-accordion-item
  • f7-accordion-toggle
  • f7-accordion-content

Accordion Properties

Prop Type Default Description
<f7-accordion-item> properties
opened boolean Makes accordion item opened

Accordion Events

Event Description
<f7-accordion-item> events
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.

Accordion List

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

In this case accordion events will be fired on f7-list-item.

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 List

In this case we need to enable accordion list on <f7-list> by passing accordion boolean prop. And enable accordion item on <f7-list-item> by passing accordion-item boolean prop:

<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 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">
        <div class="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>
        </div>
      </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">
        <div class="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>
        </div>
      </div>
    </li>
  </ul>
</div>