Аккордеон с помощью jQuery

Аккордеон с помощью jQuery. Введение

Аккордеон с помощью jQueryСегодня я хочу продолжить серию статей по работе с jQuery, как вам уже, наверняка известно, я стараюсь минимизировать количество подключаемых чужих библиотек и стараюсь все писать сам. Это помогает лучше вникать в программирование, понимать суть тех вещей, которые используются на сайте, да и намного приятней и интересней все делать самому :). И в этой статье я хочу показать как можно легко и быстро сделать, не прибегая к готовым решениям, аккордеон. Аккордеон — это блок, который позволяет уместить на странице гораздо больше информации, за счет того, что отображается только ее часть — заголовки. При клике по заголовку должна плавно раскрыться скрытая часть, и в тоже время скрыться ранее открытая. Для того, чтобы было лучше понятно, что такое аккордеон с помощью jQuery, я привел ниже пример.

Аккордеон с помощью jQuery. Пример

Контент 1
Вторая строка
Контент 2
Вторая строка
Контент 3
Вторая строка

Аккордеон с помощью 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: 1 комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*