Как сделать, чтобы jQuery ui плагин accordion сворачивался при повторном клике

07.07.2017 14:08:52

Есть хороший компонент для jQuery UI - Accordion. Как понятно из названия он работает как гармошка, т.е. при клике на заголовок, активный блок сворачивается и раскрывается новый.

Но иногда требуется чтобы компонент, при повторном нажатии на заголовок, сворачивал раскрытый блок. Т.е. это что-то среднее между акордионом и спойером.

Для этого есть специальная настройка.

Нужного эффекта можно добиться добавив active: false, collapsible: true (При этом по умолчанию все пункты будут закрыты.)

 
$( function() {
	$( "#accordion" ).accordion({heightStyle: "content", active: false, collapsible: true});
} );

Также как сделать что бы по умолчанию все пункты были закрыты и размер плашек был не фиксированный, а выравнивался по высоте.

Еще стоит обратить внимание на heightStyle: "content" - теперь все раскрывающиеся блоки не буду одного размера (по высоте), а растянутся в зависимости от содержимого.


Категории: JavaScript
Яндекс.Метрика