Accordion / Collapsible

Accordion Layout
Collapsible Layout
Accordion List View
Opposite Accordion
Example
Accordion App Methods
Accordion Events

DOM Events
App 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 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>

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

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Accordion</div>
      </div>
    </div>

    <div class="page-content">
      <div class="block-title">List View Accordion</div>
      <div class="list accordion-list">
        <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, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</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, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 3</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 4</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 4 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</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 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, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</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, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 3</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 4</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 4 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <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, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</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, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 3</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
          <li class="accordion-item"><a class="item-content item-link" href="#">
              <div class="item-inner">
                <div class="item-title">Item 4</div>
              </div>
            </a>
            <div class="accordion-item-content">
              <div class="block">
                <p>Item 4 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
                  velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <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, consectetur adipiscing elit. Nulla dignissim viverra
              velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</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, consectetur adipiscing elit. Nulla dignissim viverra
              velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</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 3</span>
          </div>
          <div class="accordion-item-content">
            <p>Item 3 content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim viverra
              velit sed euismod. Mauris sed quam vehicula, dapibus ante a, aliquet augue.</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<style>
  .custom-accordion {
    padding-left: 0;
    padding-right: 0;
  }

  .custom-accordion .accordion-item-toggle {
    padding: 0px 15px;
    height: 44px;
    line-height: 44px;
    font-size: 17px;
    color: #000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }

  .custom-accordion .accordion-item-toggle:active {
    background: rgba(0, 0, 0, 0.15);
  }

  .custom-accordion .accordion-item-toggle span {
    display: inline-block;
    margin-left: 15px;
  }

  .custom-accordion .accordion-item:last-child .accordion-item-toggle {
    border-bottom: none;
  }

  .custom-accordion .icon-plus,
  .custom-accordion .icon-minus {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px solid #000;
    border-radius: 100%;
    line-height: 20px;
    text-align: center;
  }

  .custom-accordion .icon-minus {
    display: none;
  }

  .custom-accordion .accordion-item-opened .icon-minus {
    display: inline-block;
  }

  .custom-accordion .accordion-item-opened .icon-plus {
    display: none;
  }

  .custom-accordion .accordion-item-content {
    padding: 0px 15px;
  }
</style>

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