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 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 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="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>
                <!-- 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(el) - open specified accordion item

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

    app.accordion.close(el) - close specified accordion item

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

    app.accordion.toggle(el) - 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: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

    App Events

    Event Arguments Description
    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
    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);
    });