Вертикальное меню «аккордион» с помощью jQuery

Рассмотрим пример реализации вертикального меню-аккордиона на jQuery. Глобальных отличий от примера «гармошки» на jQuery опубликованного ранее в нашем блоге нет. Можно сказать, что данный пример может послужить дополнением к тому посту. Так или иначе, давайте рассмотрим пример.

CSS стили меню:

<style type="text/css">
ul.akkordeon {
	width:500px;
	list-style:none;
}

ul.akkordeon li > p {
	cursor:pointer;
	color:#778899;
	font-size:12px;
	font-family:Verdana;
	border-bottom:1px dashed #c4c4c4;
}

ul.akkordeon li > div {
	display:none;
	padding:10px;
	font-size:12px;
	line-height:15px;
}
</style>

 
Разметка меню:

<ul class="akkordeon">
<li>
<p>Как выбрать нишу для своего первого бизнеса?</p>
<div>
Для многих потенциальных предпринимателей и
бизнесменов главной причиной долгого старта
или вообще отказа от собственного дела является
неумение подбирать идеальную нишу для будущей деятельности.
Это только на словах все выглядит просто и понятно...
</div>
</li>

<li>
<p>Новый вид развлечений — квесты в реальности</p>
<div>
Начиная с прошлого (2013) года, это новое в нашей
стране развлечение покоряет сердца тысяч игроков
по всей стране. Фанатов квестов в реальности становится
все больше и больше. Да и самих компаний, организующих
необычное развлечение, открывается большое количество...
</div>
</li>

<li>
<p>Что заставляет вас продолжать работать на дядю?</p>
<div>
Сколько будут существовать бизнес и работа по найму,
столько и будет продолжаться спор между предпринимателями
и наемными работниками. Одни считают, что нет ничего
лучше стабильной работы на кого-то...
</div>
</li>

<li>
<p>Другим примером региональной компенсации</p>
<div>
Другим примером региональной компенсации может
служить ламинарное движение анизотропно высвобождает
блеск, что свидетельствует о проникновении днепровских
льдов в бассейн Дона. Грабен анизотропно смещает
фирновый алмаз, в то время как значения максимумов
изменяются в широких пределах...
</div>
</li>
</ul>

 
Код jQuery (Вариант 1):
Первый вариант допускает открытие множества пунктов параллельно.

<script type="text/javascript">
$(document).ready(function(){
	$('ul.akkordeon li > p').click(function(){
		$(this).toggleClass('active');
		$(this).next('div').slideToggle(200);
	});
});
</script>

 
Код jQuery (Вариант 2):
В этом варианте меню сворачивается автоматически, т.е. при активации одного пункта все остальные открытые сворачиваются.

<script type="text/javascript">
$(document).ready(function(){
	$('ul.akkordeon2 li > p').click(function(){
		if(!$(this).hasClass('active')){
			$('ul.akkordeon2 li > p').removeClass('active').next('div').slideUp(); 
			$(this).addClass('active');
			$(this).next('div').slideDown(200);
		} else {
			$(this).removeClass('active').next('div').slideUp();
		}
	});
});
</script>

Рабочий пример