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-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>

<!-- 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:

Accordion Events

Accordion will fire the following DOM events on accordion items and app events on app instance:

DOM Events

App Events

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