[gray]Гармошка #1
[red]Пример реализации “гармошки”. (см. пример)[/red]
[blue]Code
Теперь приступим к разбору полетов:
Первой строчкой мы добавляем класс “active” первому элементу
<h3> внутри <div class=”accordion”>
(класс”active” отвечает за позиционирования фонового рисунка – иконки со стрелочкой).
Во второй строчке мы прячем все не первые
элементы внутри <div class=”accordion”>.
Когда происходит клик по заголовку <h3>, для следующего в нём элемента
будет применен эффект slideToggle, затем для всех остальных элементов
будет применен эффект slideUp.
Следующие действие изменяет класс заголовка на “active”,
затем ищем все остальные заголовки <h3> и убираем у них класс “ active”
[/blue]
Вот код Jquery
Code
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
[/gray]