jQuery UI – многоуровневый аккордеон с сортировкой

Пример как сделать многоуровневый аккордеон и добавить возможность перетаскивать элементы с помощью плагина jQuery UI sortable.

HTML разметка

<div class="accordion-root">
	<div class="accordion">
		<div class="accordion-item">
			<div class="accordion-header">Заголовок 1</div>
			<div>
				...
				<div class="accordion accordion-child">
					<div class="accordion-item">
						<div class="accordion-header">Заголовок 1.1</div>
						<div>...</div>
					</div> 
 					<div class="accordion-item">
						<div class="accordion-header">Заголовок 1.2</div>
						<div>...</div>
					</div> 
					<div class="accordion-item">
						<div class="accordion-header">Заголовок 1.3</div>
						<div>...</div>
					</div> 
				</div>
			</div>
		</div>
	</div>    
 	<div class="accordion">
		<div class="accordion-item">
			<div class="accordion-header">Заголовок 2</div>
			<div>
				...
				<div class="accordion accordion-child">
					<div class="accordion-item">
						<div class="accordion-header">Заголовок 2.1</div>
						<div>...</div>
					</div> 
 					<div class="accordion-item">
						<div class="accordion-header">Заголовок 2.2</div>
						<div>...</div>
					</div> 
					<div class="accordion-item">
						<div class="accordion-header">Заголовок 2.3</div>
						<div>...</div>
					</div> 
				</div>
			</div>
		</div>
	</div> 
 	<div class="accordion">
		<div class="accordion-item">
			<div class="accordion-header">Заголовок 3</div>
			<div>
				...
				<div class="accordion accordion-child">
					<div class="accordion-item">
						<div class="accordion-header">Заголовок 3.1</div>
						<div>...</div>
					</div> 
 					<div class="accordion-item">
						<div class="accordion-header">Заголовок 3.2</div>
						<div>...</div>
					</div> 
					<div class="accordion-item">
						<div class="accordion-header">Заголовок 3.3</div>
						<div>...</div>
					</div> 
				</div>
			</div>
		</div>
	</div> 
</div>
HTML

CSS стили

.accordion-item {
	border: 1px solid #ddd;
	margin: 0 0 10px 0;    
}
.ui-accordion-header {
	padding: 10px;
	background: #fff2d6;
	cursor: pointer;
	outline: none;
}
.ui-accordion-content {
	padding: 10px;
	background: #fff;
}
.portlet-placeholder {
	border: 1px dotted black;
	margin: 0 1em 1em 0;
	height: 50px;
}
CSS

JS

$('.accordion').accordion({
	header: '> .accordion-item > .accordion-header',
	heightStyle: 'content',
	active: true,
	collapsible: true
});

$('.accordion').sortable({
	handle: '.accordion-header',
	connectWith: '.accordion',
	placeholder: 'portlet-placeholder',
	containment: 'document'
});
JS

Результат

08.03.2019, обновлено 10.10.2019
Предыдущая запись Аккордеон jQuery UI

Комментарии

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

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

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
7661
+10
Ниже приведён список MIME-заголовков и расширений файлов.
1954
+1
Перетаскивание элементов списков, плитки и строк таблиц с помощью плагина jQuery UI Sortable и методы сохранения...
19064
+6
Пример горизонтального меню для лэндингов, в котором реализовано...
4490
+3
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
17410
+9
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
5789
+1