Accordion / Collapsible
- Accordion Layout
- Collapsible Layout
- Accordion List View
- Opposite Accordion
- Example
- Accordion App Methods
- Accordion Events
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
<!-- List View -->
<div class="block-title">List View Accordion</div>
<div class="list accordion-list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div></a>
<div class="accordion-item-content">
<div class="block">
<p>Item 1 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div></a>
<div class="accordion-item-content">
<div class="block">
<p>Item 2 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
...
</ul>
</div>
<!-- Separate collapsibles - omit "accordion-list" class-->
<div class="block-title">Separate Collapsibles</div>
<div class="list">
<ul>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div></a>
<div class="accordion-item-content">
<div class="block">
<p>Item 1 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
<li class="accordion-item"><a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div></a>
<div class="accordion-item-content">
<div class="block">
<p>Item 2 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
...
</ul>
</div>
<!-- Opposite Side -->
<div class="block-title">Opposite Side</div>
<div class="list accordion-list accordion-opposite">
<ul>
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>Item 1 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
<li class="accordion-item">
<a class="item-content item-link" href="#">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>Item 2 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
...
</ul>
</div>
<!-- Custom Accordion -->
<div class="block-title">Custom Accordion</div>
<div class="block accordion-list custom-accordion">
<div class="accordion-item">
<div class="accordion-item-toggle">
<i class="icon icon-plus">+</i>
<i class="icon icon-minus">-</i>
<span>Item 1</span>
</div>
<div class="accordion-item-content">
<p>Item 1 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle">
<i class="icon icon-plus">+</i>
<i class="icon icon-minus">-</i>
<span>Item 2</span>
</div>
<div class="accordion-item-content">
<p>Item 2 content. Lorem ipsum dolor sit amet...</p>
</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);
});