Skip to main content

Accordion / Collapsible

Навігація

Макет Accordion

Загальний макет Accordion можна розглядати як наступне:
<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>
Де

accordion-list - перелік предметів набору Accordion. Опціональний клас

accordion-item - одинарний елемент Accordion. Є обов'язковим

accordion-item-toggle - посилання для розширення/згортання вмісту елемента Accordion. Є обов'язковим

accordion-item-content - вміст предмета прихованого Accordion. Є обов'язковим

accordion-item-opened - одинарний відкритий Accordion

Макет, що розгортається

Якщо ви хочете використовувати один окремий згорнутий елемент, ви можете просто опустити елемент обгортки "accordion-list": 
<!-- 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 Перегляд списку

Якщо ви використовуєте перегляд списку Accordion , ви можете використовувати елемент «item-link» замість «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

Щоб відобразити піктограму шеврона акордеона на протилежній стороні (ліворуч у LTR), потрібно додати додатковий клас акордеона протилежно до контейнера акордеона або списку акордеонів:
<!-- 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>

Приклад 

<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 Методи застосунку

Accordion також має API JavaScript, який дозволяє Розгляньмо деякі методи застосунку Accordion:

app.accordion.open(item) - відкрити зазначений гармошковий елемент

● item - HTMLElement or string (із CSS Selector) елемента accordion-item (<div class="accordion-item">). Вимагається

app.accordion.close(item) - закрити гармошкою вказаний пункт

● item - HTMLElement or string (із CSS Selector) елемента accordion-item (<div class="accordion-item">). Вимагається

app.accordion.toggle(item) - перемкнути вказаний елемент гармошки

● item - HTMLElement or string (із CSS Selector) елемента accordion-item (<div class="accordion-item">). Вимагається

Accordion Події

Accordion запускатиме наступні події DOM для елементів акордеона та події застосунку в екземплярі застосунку:
ПодіяОб'єктОпис
accordion:beforeopen
Accordion пункт

<div class="accordion-item">

Подія буде ініційована безпосередньо перед тим, як акордеонний вміст почне свою початкову анімацію. event.detail.prevent містить функцію, яка запобігатиме відкриттю гармошки під час виклику
accordion:open
Accordion пункт

<div class="accordion-item">

Подія буде ініційована, коли вміст гармошки почне свою початкову анімацію
accordion:opened
Accordion пункт

<div class="accordion-item">

Подію буде ініційовано після завершення початкової анімації вмісту гармошки
accordion:beforeclose
Accordion пункт

<div class="accordion-item">

Подія буде ініційована безпосередньо перед тим, як акордеонний вміст почне завершувати анімацію. event.detail.prevent містить функцію, яка запобігає закриттю гармошки під час виклику
accordion:close
Accordion пункт

<div class="accordion-item">

Подія буде ініційована, коли акордеонний вміст почне завершувати анімацію
accordion:closed
Accordion пункт

<div class="accordion-item">

Подію буде запущено після завершення анімації гармошки

Події застосунку

ПодіяАргументОпис
accordionBeforeOpen
(el, prevent)
Подія буде ініційована безпосередньо перед тим, як акордеонний вміст почне свою початкову анімацію. prevent містить функцію, яка запобігатиме відкриттю гармошки під час виклику
accordionOpen
(el)
Подія буде ініційована, коли вміст акордеона почне свою початкову анімацію
accordionOpened
(el)
Подію буде ініційовано після завершення початкової анімації вмісту акордеона
accordionBeforeClose
(el, prevent)
Подія буде ініційована безпосередньо перед тим, як акордеонний вміст почне завершувати анімацію. prevent містить функцію, яка запобігає закриванню акордеона під час виклику
accordionClose
(el)
Подія буде ініційована, коли акордеонний вміст почне завершувати анімацію
accordionClosed
(el)
Подію буде запущено після завершення анімації акордеона
 
var app = new Techno4();

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

Techno4 Framework