Get Started
Vue Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
- Forms
  - Checkboxes & Radios
  - Form Elements
  - Smart Select
- Icon
- Grid / Layout Grid
- Lists
  - List
  - List Item
  - List Button
  - Accordion List
  - Contacts List
  - Sortable List
  - Swipeout List
  - Virtual List
- Link
- Messages
- Message Bar
- Modals
  - Action Sheet
  - Login Screen
  - Picker Modal
  - Popover
  - Popup
- Navigation Bars
  - Navbar
  - Toolbar/Tabbar
  - Sub Navbar
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View

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

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.