Вертикальное меню аккордеон на javascript/jQuery

И снова рубрика "зачем плагины, библиотеки - сделай сам". Для реализации обычного вертикального меню аккоредон нам понадобится всего 4 строчки кода на jQuery. Для красивого эффекта слайдинга раскрывания/скрывания пунктов меню нам понадобится jquery функция slideDown/slideUp. Для верной семантичной структуры html кода мы сверстаем меню с помощью ul>li, ведь списки, пункты меню и другие навигационные элементы должны верстаться с помощью ul>li.

Смотреть демо

Поместим в li теги p и div, в p будет пункт меню, в div - содержание/описание пункта меню(раскрывающая часть). Посмотрим html код:

	<ul class="akkordeon">
		<li>
			<p>Несколько активных пунктов</p>
			<div>Окраска, особенно в речных долинах, <a href="">обрывисто формирует</a> конус выноса, так как совершенно однозначно указывает на существование и рост в период оформления <b>палеогеновой поверхности выравнивания</b>. Присоединение органического вещества, основываясь большей частью на сейсмических данных, интенсивно поступает в меловой ийолит-уртит, что лишь подтверждает то, что породные отвалы располагаются на склонах.</div>
		</li>
		<li>
			<p>Габбро разогревает основной трог</p>
			<div>Габбро разогревает основной трог, за счет чего увеличивается мощность коры под многими хребтами. Эта разница, вероятно, помогает объяснить, почему верховое болото пододвигается под окско-донской кимберлит, но приводит к загрязнению окружающей среды.</div>
		</li>
		<li>
			<p>Калиево-натриевый полевой шпат</p>
			<div>Калиево-натриевый полевой шпат обогащает первичный лакколит, что обусловлено не только первичными неровностями эрозионно-тектонического рельефа поверхности кристаллических пород, но и проявлениями долее поздней блоковой тектоники</div>
		</li>
		<li>
			<p>Другим примером региональной компенсации</p>
			<div>Другим примером региональной компенсации может служить ламинарное движение анизотропно высвобождает блеск, что свидетельствует о проникновении днепровских льдов в бассейн Дона. Грабен анизотропно смещает фирновый алмаз, в то время как значения максимумов изменяются в широких пределах.</div>
		</li>
	</ul>
	

Стилизуем html в стиле вертикального аккордеон меню, выделим пункт меню градиентом и выделим активный пункт отдельным цветом градиента:

	<style type="text/css">
		ul.akkordeon{
			width: 300px;
			border: 1px solid rgb(182, 182, 182);
		}
		ul.akkordeon li > p{
			cursor: pointer;
			padding: 10px 10px;
			margin: 0;
			color: white;
			text-shadow: 0px 1px 1px rgb(73, 73, 73);
			text-align: center;
			font-size: 12px;
			font-family: sans-serif;
			background: #0C0C0C -webkit-gradient(linear, left top, left bottom, from(#868585), to(#666)) no-repeat;
		}
		ul.akkordeon li > p:hover{
			background: #0C0C0C -webkit-gradient(linear, left top, left bottom, from(#868585), to(#4E4B4B)) no-repeat;
		}
		ul.akkordeon li > p.active{
			background: #369 -webkit-gradient(linear, left top, left bottom, from(#86B8E9), to(#5682AE)) no-repeat;
		}
		ul.akkordeon li > div{
			display: none;
			padding: 10px;
			font-size: 11px;
			line-height: 15px;
		}
	</style>
	

Код jQuery:

	<script type="text/javascript">
		$(document).ready(function(){	//страница загрузилась	
			$('ul.akkordeon li > p').click(function(){	//при клике на пункт меню:
				$(this).toggleClass('active');		//делаем данный пункт активным/неактивным
				$(this).next('div').slideToggle(200);	//раскрываем/скрываем следующий за "кликнутым" p блок div с эффектом slide
			});
		});
	</script>
	

Есть 2 варианта работы аккордеон меню:

- возможность раскрыть несколько пунктов. Как раз тот код, что выше.

- только 1 активный пункт меню. Раскрыв 1 пункт, остальные пункты скрываются автоматически:

	<script type="text/javascript">
		$(document).ready(function(){
			$('ul.akkordeon1 li > p').click(function(){
				if(!$(this).hasClass('active')){	//если "кликнутый" пункт неактивный:
					$('ul.akkordeon1 li > p').removeClass('active').next('div').slideUp(); //делаем неактивными все пункты и скрываем все блоки
					$(this).addClass('active');	//активируем "кликнутый" пункт
					$(this).next('div').slideDown(200);	//раскрываем следующий за ним блок с описанием
				} else {	//иначе:
					$(this).removeClass('active').next('div').slideUp();	//скрываем данный пункт
				}
			});
		});
	</script>
	

2 варианта работы аккордеон меню можно посмотреть в демо-примере:

Смотреть демо