Аккордеон jQuery UI

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

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

Стандартные 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;
}
CSS
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>
HTML
$('.accordion').accordion({
	heightStyle: 'content',
	header: '.accordion-header'
});
JS

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

<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>
HTML
$('.accordion').accordion({
	heightStyle: 'content',
	header: '> .accordion-item > .accordion-header'
});
JS
.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;
}
CSS
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(/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);
}
CSS

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

.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);
}
CSS
4

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

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

Закрыть все вкладки:

$('.accordion').accordion({
	active: true
});
JS
20.02.2019, обновлено 09.10.2020
25763

Комментарии 1

Sergey Sep Sergey Sep
26 июля 2023 в 22:41
Кажется, в примере, где описан общий контейнер, в коде JS, строчка 3:
header: '> .accordion-item > .accordion-header'

первый знак '>' указан ошибочно.

, чтобы добавить комментарий.

Другие публикации

Календарь jQuery UI Datepicker
DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю ввода формы.
81957
+6
jQuery UI Sortable - перетаскивание элементов
Перетаскивание элементов списков, плитки и строк таблиц с помощью плагина jQuery UI Sortable и методы сохранения...
43708
+13
Слайдеры изображений на плагине bxSlider
BxSlider отличный jquery плагин слайдеров и каруселей, адаптивный, легко настраивается, поддерживает любой тип...
20998
-1
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
67722
+27
jQuery UI Slider
jQuery UI Slider – гибкий плагин, который позволяет создать элементы интерфейса в виде ползунков в различных вариантах.
20114
+4
Работа с cookie в JavaScript
Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя. Для хранимых данных существуют несколько ограничений...
64380
+8