Блочный аккордеон

Как и в предыдущем примере, здесь так же показаны два варианта, с той лишь разницей, что для разметки используются элементы div и заголовки. Такой вариант реализации аккордеона может быть удобен, например, для оформления страницы "Вопрос-Ответ".

Первый вариант. Аккордеон без автоматического закрытия скрытых блоков.

html разметка

<div id="faq_first" class="nav_wrap">
	<h3>Как сделать всплывающую подсказку на css?</h3>
	<div class="sub_nav">
		<p>Способов реализации всплывающих подсказок (tooltip) придумано очень много. Об одном, очень простом методе, реализованном с использованием только css, вы можете прочесть в статье <strong>"Всплывающая подсказка на css"</strong>.</p>		
	</div>	
	<h3>Какие первичные настройки требуется сделать после установки Joomla?</h3>
	<div class="sub_nav">
		<p>- "включить" файл .htaccess;</p>
		<p>- настроить ЧПУ и mod_rewrite;</p>
		<p>- убрать id из урла joomla (если речь идет о версиях 2.5 или 3)</p>
		<p>Более подробно о настроках можно узнать в статьях <strong>"Первичные настройки Joomla 1.5.x/2.5.x/3.0.x"</strong> и <strong>"Убираем id из урла joomla 2.5.x/3.0.x"</strong></p>
	</div>
	<h3>Какие файлы отвечают за вывод пагинации в Virtuemart 1.х?</h3>
	<div class="sub_nav">
		<p>Для изменения стилевого оформления можно использовать файл со стилями применяемого шаблона. Если требуется изменить разметку, то править следует файл <strong>/components/com_virtuemart/themes/default/templates/browse/includes/browse_pagenav.tpl.php</strong>.</p>	
	</div>	
	<h3>Как установить MODx Revolution на удаленный сервер?</h3>
	<div class="sub_nav">
		<p>Подробные инструкции по этому вопросу даны в статье <strong>"Установка MODx Evolution"</strong>. Так же следует обратить внимание на настройки сервера. О том, какие настройки необходимы для этой CMS, можно узнать из раздела <strong>"Работа с сервером"</strong>.</p>		
	</div>	
</div>

Вариант стилевого оформления:

.nav_wrap {
margin:20px auto;
width:600px;
}
.nav_wrap h3 {
margin-bottom:10px;
padding-left:20px;
line-height:24px;
font-size:16px;
color:#000;
text-decoration:none;
border-bottom:1px solid #d4d9df;
cursor:pointer;
position:relative;
}
.nav_wrap h3 span {
width:0;
height:0;
position:absolute;
top:10px;
left:6px;
border-top:3px solid transparent;
border-bottom:3px solid transparent;
border-left:6px solid #000;
}
.nav_wrap h3.active span {
border-top:6px solid #000;
border-left:3px solid transparent;
border-right:3px solid transparent;
}
.sub_nav {
padding:0 10px 20px 20px;
width:580px;
display:none;
} 
.sub_nav p {
font-size:12px;
color:#333;
}

jQuery код:

$(function () {
	var el = $('#faq_first h3'),
		subEl = $('#faq_first div.sub_nav');	
	
	el.append('<span></span>');		
	el.click(function() {
		var checkElement = $(this).next(subEl);		
		checkElement.stop().animate({'height':'toggle'}, 300);	
		$(this).toggleClass('active');
	});
});

Второй вариант. Аккордеон с автоматическим закрытием неактивных вложенных блоков.

html и css код остается без изменений. Нужно только поменять id у родительского контейнера, если предполагается разместить оба варианта на одной странице.

jQuery код для второго варианта (в примере оба меню размещены в одном документе):

$(function () {
	var el = $('#faq_last h3'),
		subEl = $('#faq_last div.sub_nav'),	
		prevElement = el.next(subEl).prev();		

	prevElement.append('<span></span>');
	el.click(function() {
		var checkedElement = $(this).next(subEl);
			visibleElement = subEl.filter(':visible');
			
		visibleElement.stop().animate({'height':'toggle'}, 300).prev().toggleClass('active');		
		if((checkedElement.is(subEl)) && (!checkedElement.is(':visible'))) {
			checkedElement.stop().animate({'height':'toggle'}, 300).prev().toggleClass('active');
		}
		return false;
	});
});

Оба варианта независимо друг от друга выполняют требуемые от них функции, даже, если их разместить на одной странице.

Меню протестированы в IE 7-8-9, Chrome, Safari, Opera, FF и везде демонстрируют одинаковый результат.

С подробным анализом кода в примерах можно ознакомиться в статьях "Аккордеон без списков" и "Улучшаем аккордеон без списков ".