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-expanded">
<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 class
accordion-item
- single accordion item. Required
accordion-item-toggle
- link to expand/collapse accordion item content. Requiredaccordion-item-content
- hidden accordion item content. Requiredaccordion-item-expanded
- single expandend/opened accordion itemIf 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>
If you use list view as accordion you may use "item-link" element instead of "accordion-toggle":
<div class="list-block 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>
<!-- List View -->
<div class="content-block-title">List View Accordion</div>
<div class="list-block 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="content-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="content-block">
<p>Item 2 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
...
</ul>
</div>
<!-- Separate collapsibles - omit "accordion-list" class-->
<div class="content-block-title">Separate Collapsibles</div>
<div class="list-block">
<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="content-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="content-block">
<p>Item 2 content. Lorem ipsum dolor sit amet...</p>
</div>
</div>
</li>
...
</ul>
</div>
<!-- Custom Accordion -->
<div class="content-block-title">Custom Accordion</div>
<div class="content-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 also has JavaScript API that allows you to open and close them programmatically. Let's look on appropriate App's methods:
myApp.accordionOpen(item) - open specified accordion item
myApp.accordionClose(item) - close specified accordion item
myApp.accordionToggle(item) - toggle specified accordion item
Accordion list have the following events:
Event | Target | Description |
---|---|---|
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: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 |
var myApp = new Framework7();
var $$ = Dom7;
$$('.accordion-item').on('accordion:opened', function () {
myApp.alert('Accordion item opened');
});
$$('.accordion-item').on('accordion:closed', function (e) {
myApp.alert('Accordion item closed');
});