JS/jQuery

Аккордеон jQuery UI

jQuery UI Accordion функциональный плагин аккордеона. Рассмотрим примеры использования.

Документация
http://api.jqueryui.com/accordion/

CDN
<script src="https://cdn.snipp.ru/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.snipp.ru/jqueryui/1.12.1/jquery-ui.min.js"></script>

В примерах установлен параметр heightStyle: 'content' – устанавливает высоту панелей по содержимому. В отличии от auto, который делает все панели с одинаковой высотой, что не очень удобно.

1

Базовое использование

<div class="accordion">
    <h3>Заголовок 1</h3>
    <div>...</div>
    
    <h3>Заголовок 2</h3>
    <div>...</div>
    
    <h3>Заголовок 2</h3>
    <div>...</div>
</div>
$('.accordion').accordion({
    heightStyle: 'content'
});

Стандартные CSS-стили плагина лучше не использовать т.к. их все рано придется переопределять с применением множества !important.

.accordion .ui-accordion-header {
    margin: 0 0 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    background: #eee;
    cursor: pointer;
    outline: none;
}
.accordion .ui-accordion-content {
    margin: 0 0 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    background: #fff;
}
2

Замена стандартной разметки

Не всегда удобно что в качестве заголовка используется <h3>, можно его заменить, указав в параметре header селектор заголовка .accordion-header.

<div class="accordion">
    <div class="accordion-header">Заголовок 1</div>
    <div>...</div>

    <div class="accordion-header">Заголовок 2</div>
    <div>...</div>

    <div class="accordion-header">Заголовок 3</div>
    <div>...</div>
</div>
$('.accordion').accordion({
    heightStyle: 'content',
    header: '.accordion-header'
});

Также этим параметром можно добавить общий контейнер к заголовку и тексту.

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">Заголовок 1</div>
        <div>...</div>
    </div> 
   
    <div class="accordion-item">
        <div class="accordion-header">Заголовок 2</div>
        <div>...</div>
    </div> 
   
    <div class="accordion-item">
        <div class="accordion-header">Заголовок 3</div>
        <div>...</div>
    </div>
</div>
$('.accordion').accordion({
    heightStyle: 'content',
    header: '> .accordion-item > .accordion-header'
});
.accordion .accordion-item {
    border: 1px solid #ddd;
    margin: 0 0 10px 0;    
}
.accordion .ui-accordion-header {
    padding: 10px;
    background: #ffe3d6;
    cursor: pointer;
    outline: none;
}
.accordion .ui-accordion-content {
    padding: 10px;
}
3

Добавление иконок

Специально для иконок состояния, плагин добавляет в заголовки пустые span, к которым применяются стили.

Открытая вкладка:
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>

У закрытой вкладки:
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>

Иконки слева

.accordion .ui-accordion-header-icon {
    content: '';
    display: inline-block;
    background: url(https://snipp.ru/img/down.png) 50% 50% no-repeat;
    width: 20px;
    height: 13px;
    margin-right: 10px;
    vertical-align: middle;
}
.accordion .ui-accordion-header-active .ui-accordion-header-icon {
    background-image: url(https://snipp.ru/img/up.png);
}

Иконки справа

.accordion .ui-accordion-header {
    position: relative;
}
.accordion .ui-accordion-header-icon {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;    
    display: inline-block;
    width: 20px;
    height: 13px;    
    background: url(https://snipp.ru/img/down.png) 50% 50% no-repeat;
}
.accordion .ui-accordion-header-active .ui-accordion-header-icon {
    background-image: url(https://snipp.ru/img/up.png);
}
4

Состояние вкладок

Параметр active задает индекс вкладки которая будет открыта по умолчанию (начиная с нуля).

$('.accordion').accordion({
    active: 1
});

Значение active: true закрывает все вкладки.

5

Виджет типа «вопрос-ответ»

По умолчанию все вкладки закрыты, клик по заголовку открывает или закрывает вкладку.

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">Заголовок 1</div>
        <div>...</div>
    </div> 
   
    <div class="accordion-item">
        <div class="accordion-header">Заголовок 2</div>
        <div>...</div>
    </div> 
   
    <div class="accordion-item">
        <div class="accordion-header">Заголовок 3</div>
        <div>...</div>
    </div>
</div>
$('.accordion').accordion({
    active: true,
    collapsible: true,
    heightStyle: 'content',
    header: '> .accordion-item > .accordion-header'
});
.accordion .accordion-item {
    border: 1px solid #ddd;
    margin: 0 0 10px 0;    
}
.accordion .ui-accordion-header {
    padding: 10px;
    background: #d6e1ff;
    cursor: pointer;
    outline: none;
    position: relative;
}
.accordion .ui-accordion-header-icon {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;    
    display: inline-block;
    width: 20px;
    height: 13px;    
    background: url(https://snipp.ru/img/down.png) 50% 50% no-repeat;
}
.accordion .ui-accordion-header-active .ui-accordion-header-icon {
    background-image: url(https://snipp.ru/img/up.png);
}
.accordion .ui-accordion-content {
    padding: 10px;
}
20 февраля 2019
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...