Есть хороший компонент для jQuery UI - Accordion. Как понятно из названия он работает как гармошка, т.е. при клике на заголовок, активный блок сворачивается и раскрывается новый.
Но иногда требуется чтобы компонент, при повторном нажатии на заголовок, сворачивал раскрытый блок. Т.е. это что-то среднее между акордионом и спойером.
Для этого есть специальная настройка.
Нужного эффекта можно добиться добавив active: false, collapsible: true (При этом по умолчанию все пункты будут закрыты.)
$( function() {
$( "#accordion" ).accordion({heightStyle: "content", active: false, collapsible: true});
} );
Также как сделать что бы по умолчанию все пункты были закрыты и размер плашек был не фиксированный, а выравнивался по высоте.
Еще стоит обратить внимание на heightStyle: "content" - теперь все раскрывающиеся блоки не буду одного размера (по высоте), а растянутся в зависимости от содержимого.