SponsorsBecome a sponsor
- Get Started
- Events
- Router / Navigation
- Store
- Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Area Chart
- Autocomplete
- Badge
- Block / Content Block
- Breadcrumbs
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Color Picker
- Contacts List
- Data Table
- Dialog
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Segmented
- Sheet Modal
- Skeleton
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swipeout
- Swiper
- Tabs
- Text Editor
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Treeview
- View / Router
- Virtual List
- Framework7 Icons
- Styling
- Dom7
- Touch Utilities
- Utilities
- Plugins API
- Lazy Modules
- Custom Build
Accordion / Collapsible
Accordion Layout
Common Accordion layout could be treat as the following:
<div class="accordion-list">
<div class="accordion-item">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
<div class="accordion-item accordion-item-opened">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
...
</div>Where
accordion-list- list of accordion items set. Optional classaccordion-item- single accordion item. Requiredaccordion-item-toggle- link to expand/collapse accordion item content. Requiredaccordion-item-content- hidden accordion item content. Required
accordion-item-opened- single opened accordion item
Collapsible Layout
If you want to use single separate collapsible element you may just omit "accordion-list" wrapper element:
<!-- Single collapsible element -->
<div class="accordion-item">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
<!-- Another separate collapsible element -->
<div class="accordion-item">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>Accordion List View
If you use list view as accordion you may use "item-link" element instead of "accordion-toggle":
<div class="list accordion-list">
<ul>
<li class="accordion-item">
<a href="" class="item-link item-content">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</a>
<div class="accordion-item-content">Item 1 content ...</div>
</li>
<li class="accordion-item">
<a href="" class="item-link item-content">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</a>
<div class="accordion-item-content">Item 2 content ...</div>
</li>
</ul>
</div>Opposite Accordion
To render accordion chevron icon on opposite side (on left in LTR), it is required to add extra accordion-opposite class to accordion container or accordion list:
<!-- Accordion opposite -->
<div class="accordion-list accordion-opposite">
<div class="accordion-item">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
<div class="accordion-item accordion-item-opened">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
...
</div>
<!-- Accordion list opposite -->
<div class="list accordion-list accordion-opposite">
<ul>
<li class="accordion-item">
<a href="" class="item-link item-content">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</a>
<div class="accordion-item-content">Item 1 content ...</div>
</li>
<li class="accordion-item">
<a href="" class="item-link item-content">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</a>
<div class="accordion-item-content">Item 2 content ...</div>
</li>
</ul>
</div>Example
accordion.html
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Accordion</div>
</div>
</div>
<div class="page-content">
<div class="block-title">List View Accordion</div>
<div class="list list-strong list-outline-ios list-dividers-ios inset-md accordion-list">
<ul>
<li class="accordion-item">
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Lorem Ipsum</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
viverra blandit suscipit eget ipsum.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Nested List</div>
</div>
</a>
<div class="accordion-item-content">
<div class="list">
<ul>
<li>
<div class="item-content">
<div class="item-media"> <i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"> <i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 3</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 4</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Integer semper</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
viverra blandit suscipit eget ipsum.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="block-title">Opposite Side</div>
<div class="list list-strong list-outline-ios list-dividers-ios inset-md accordion-opposite accordion-list">
<ul>
<li class="accordion-item">
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Lorem Ipsum</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
viverra blandit suscipit eget ipsum.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Nested List</div>
</div>
</a>
<div class="accordion-item-content">
<div class="list">
<ul>
<li>
<div class="item-content">
<div class="item-media"> <i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"> <i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 3</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Item 4</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-link item-content">
<div class="item-inner">
<div class="item-title">Integer semper</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
viverra blandit suscipit eget ipsum.
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>Accordion App Methods
Accordion also has a JavaScript API that allows you to open and close them programmatically. Lets look at some Accordion App methods:
app.accordion.open(item) - open specified accordion item
- item - HTMLElement or string (with CSS Selector) of accordion-item element (<div class="accordion-item">). Required
app.accordion.close(item) - close specified accordion item
- item - HTMLElement or string (with CSS Selector) of accordion-item element (<div class="accordion-item">). Required
app.accordion.toggle(item) - toggle specified accordion item
- item - HTMLElement or string (with CSS Selector) of accordion-item element (<div class="accordion-item">). Required
Accordion Events
Accordion will fire the following DOM events on accordion items and app events on app instance:
DOM Events
| Event | Target | Description |
|---|---|---|
| accordion:beforeopen | Accordion item<div class="accordion-item"> | Event will be triggered right before accordion content starts its opening animation. event.detail.prevent contains function that will prevent accordion from opening when called |
| accordion:open | Accordion item<div class="accordion-item"> | Event will be triggered when accordion content starts its opening animation |
| accordion:opened | Accordion item<div class="accordion-item"> | Event will be triggered after accordion content completes its opening animation |
| accordion:beforeclose | Accordion item<div class="accordion-item"> | Event will be triggered right before accordion content starts its closing animation. event.detail.prevent contains function that will prevent accordion from closing when called |
| accordion:close | Accordion item<div class="accordion-item"> | Event will be triggered when accordion content starts its closing animation |
| accordion:closed | Accordion item<div class="accordion-item"> | Event will be triggered after accordion content completes its closing animation |
App Events
| Event | Arguments | Description |
|---|---|---|
| accordionBeforeOpen | (el, prevent) | Event will be triggered right before accordion content starts its opening animation. prevent contains function that will prevent accordion from opening when called |
| accordionOpen | (el) | Event will be triggered when accordion content starts its opening animation |
| accordionOpened | (el) | Event will be triggered after accordion content completes its opening animation |
| accordionBeforeClose | (el, prevent) | Event will be triggered right before accordion content starts its closing animation. prevent contains function that will prevent accordion from closing when called |
| accordionClose | (el) | Event will be triggered when accordion content starts its closing animation |
| accordionClosed | (el) | Event will be triggered after accordion content completes its closing animation |
var app = new Framework7();
var $ = Dom7;
$('.accordion-item').on('accordion:opened', function () {
app.dialog.alert('Accordion item opened');
});
$('.accordion-item').on('accordion:closed', function (e) {
app.dialog.alert('Accordion item closed');
});
app.on('accordionOpened', function (el) {
console.log('The following element opened:');
console.log(el);
});