Демо версия в 1000 раз лучше всех слов. Просто посмотрите Первым делом подключаем стили оформления: суём этот код между хедами
Code <link rel="stylesheet" href="style.css" /> Теперь взглянем на структуру HTML:
Code <ul class="acc" id="acc">
...
</ul> Все содержимое должно находится на месте точек в коде сверху. Содержимое в свою очередь:
Code <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-х точек можно вставить встроенные ячейки, которые выглядят так:
Code <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". И сразу после всего этого подключаем скрипт для всех необходимых эффектов:
Code <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 кнопки может раскрыть или закрыть все вкладки:
Code <a href="javascript:parentAccordion.pr(1)">Раскрыть все</a> <a href="javascript:parentAccordion.pr(-1)">Закрыть все</a>
Спасибо всем за внимания!
Кому понравилось ставим +
| 
