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-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. Required
      • accordion-item-content - hidden accordion item content. Required
    • accordion-item-expanded - single expandend/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-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>

Example

<!-- 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 JavaScript API

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

  • item - HTMLElement or string (with CSS Selector) of accordion-item (<div class="accordion-item">). Required

myApp.accordionClose(item) - close specified accordion item

  • item - HTMLElement or string (with CSS Selector) of accordion-item (<div class="accordion-item">). Required

myApp.accordionToggle(item) - toggle specified accordion item

  • item - HTMLElement or string (with CSS Selector) of accordion-item (<div class="accordion-item">). Required

Accordion events

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');
});