В данном уроке пойдет речь об универсальном плагине, который можно использовать как для навигации, так и для всего сайта в целом.
Давайте приступим к тому, как это все сделать. Первым делом подключаем стили оформления:
<link rel="stylesheet" href="style.css" />
Теперь взглянем на структуру HTML:
<ul class="acc" id="acc">
...
</ul>
Все содержимое должно находится на месте точек в коде сверху. Содержимое в свою очередь:
<li>
<h3>About</h3>
<div class="acc-section">
<div class="acc-content">
...
This lightweight (1.4 KB) JavaScript accordion can easily be customized to integrate with any website. For more information visit <a href="http://www.leigeber.com">leigeber.com</a>.
</div>
</div>
</li>
Такая структура у каждой ячейки. На месте 3-х точек можно вставить встроенные ячейки, которые выглядят так:
<ul class="acc" id="nested">
<li>
<h3>Nested One</h3>
<div class="acc-section">
<div class="acc-content">
Содержание первой встроенной ячейки
</div>
</div>
</li>
<li>
<h3>Nested Two</h3>
<div class="acc-section">
<div class="acc-content">
Содержание второй встроенной ячейки
</div>
</div>
</li>
<li>
<h3>Nested Three</h3>
<div class="acc-section">
<div class="acc-content">
Содержание третьей встроенной ячейки
</div>
</div>
</li>
</ul>
Как Вы видите структура у встроенных такая же как и у простых ячеек. Единтсвенное различие, это id="nested".
И сразу после всего этого подключаем скрипт для всех необходимых эффектов:
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",false,0);
var nestedAccordion=new TINY.accordion.slider("nestedAccordion");
nestedAccordion.init("nested","h3",true,1,"acc-selected");
</script>
Вот и все готово. Единственное, что могу добавить, так это код, который с помощью нажатия 1 кнопки может раскрыть или закрыть все вкладки:
<a href="javascript:parentAccordion.pr(1)">Раскрыть все</a>
<a href="javascript:parentAccordion.pr(-1)">Закрыть все</a>
Его можно поместить в любом месте документа.
Всем хорошего дня!