jQuery UI Accordion функциональный плагин аккордеона. Рассмотрим примеры использования.
Документация
http://api.jqueryui.com/accordion/
В примерах установлен параметр heightStyle: 'content'
– устанавливает высоту панелей по содержимому. В отличии от auto
, который делает все панели с одинаковой высотой, что не очень удобно.
CDN
https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
<div class="accordion">
<h3>Заголовок 1</h3>
<div>...</div>
<h3>Заголовок 2</h3>
<div>...</div>
<h3>Заголовок 2</h3>
<div>...</div>
</div>
Стандартные 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;
}
Не всегда удобно что в качестве заголовка используется <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>
Также этим параметром можно добавить общий контейнер к заголовку и тексту.
<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;
}
Специально для иконок состояния, плагин добавляет в заголовки пустые 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(/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(/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(/img/down.png) 50% 50% no-repeat;
}
.accordion .ui-accordion-header-active .ui-accordion-header-icon {
background-image: url(/img/up.png);
}
Параметр active
задает индекс вкладки которая будет открыта по умолчанию (начиная с нуля).
Закрыть все вкладки:
первый знак '>' указан ошибочно.