Аккордеон с помощью jQuery. Введение
Сегодня я хочу продолжить серию статей по работе с jQuery, как вам уже, наверняка известно, я стараюсь минимизировать количество подключаемых чужих библиотек и стараюсь все писать сам. Это помогает лучше вникать в программирование, понимать суть тех вещей, которые используются на сайте, да и намного приятней и интересней все делать самому :). И в этой статье я хочу показать как можно легко и быстро сделать, не прибегая к готовым решениям, аккордеон. Аккордеон — это блок, который позволяет уместить на странице гораздо больше информации, за счет того, что отображается только ее часть — заголовки. При клике по заголовку должна плавно раскрыться скрытая часть, и в тоже время скрыться ранее открытая. Для того, чтобы было лучше понятно, что такое аккордеон с помощью jQuery, я привел ниже пример.
Аккордеон с помощью jQuery. Пример
Вторая строка
Вторая строка
Вторая строка
Аккордеон с помощью jQuery. Код
А теперь сам код. Верстка:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Аккордеон с помощью jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
.accordion label{
border: 1px solid orange;
color: orange;
cursor: pointer;
display: block;
margin-bottom: 3px;
width: 300px;
}
.accordion .content{
display: none;
}
</style>
</head>
<body>
<div class="accordion active">
<label>Заголовок 1</label>
<div class="content">
Контент 1<br/>Вторая строка
</div>
</div>
<div class="accordion">
<label>Заголовок 2</label>
<div class="content">
Контент 2<br/>Вторая строка
</div>
</div>
<div class="accordion">
<label>Заголовок 3</label>
<div class="content">
Контент 3<br/>Вторая строка
</div>
</div>
</body>
</html>
И javaScript:
// после загрузки страницы
$(document).ready(function(){
// запускаем отображение аккордеона
makeAccordion();
// при клике по заголовку
$('.accordion label').click(function(){
// снимаем со всех div`ов класс active
$('.accordion').each(function(){
$(this).removeClass('active');
});
// задаем родительскому div`у класс active
$(this).parent().addClass('active');
// запускаем отображение аккордеона
makeAccordion();
});
});
// функция для отображения аккордеона. Сворачивает и разворачивает
function makeAccordion(){
var speed = 300; // скорость анимации
// перебираем все блоки аккордеона
$('.accordion').each(function(){
if($(this).hasClass('active')){
// если находим активный, то разворачиваем его
$(this).find('.content').slideDown(speed);
}else{
// не активный сворачиваем
$(this).find('.content').slideUp(speed);
}
});
}
На этом все. Прикладываю исходники — скачать.
Классная статья спасибо за разъяснение по аккордеону на jquery