Многоуровневый Вертикальный блок-аккордеон на jQuery
|
1 2 3 4 5 6 7 8 |
<link rel="stylesheet" href="/css/style.css" type="text/css" /> <script type="text/javascript" src="/js/script.js"></script> <script type="text/javascript"> var parentAccordion=new TINY.accordion.slider("parentAccordion"); parentAccordion.init("acc","h3",0,0); var nestedAccordion=new TINY.accordion.slider("nestedAccordion"); nestedAccordion.init("nested","h3",1,-1,"acc-selected"); </script> |
2#: В то место, где хотите видеть аккордеон, вставляйте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<div id="options"> <a href="javascript:parentAccordion.pr(1)">Показать всё</a> | <a href="javascript:parentAccordion.pr(-1)">Скрыть всё</a> </div> <ul class="acc" id="acc"> <li> <h3>Раздел 1</h3> <div class="acc-section"> <div class="acc-content"> <ul class="acc" id="nested"> <li> <h3>Блок 1</h3> <div class="acc-section"> <div class="acc-content"> Контент блока 1 </div> </div> </li> <li> <h3>Блок 2</h3> <div class="acc-section"> <div class="acc-content"> Контент блока 2 </div> </div> </li> <li> <h3>Блок 3</h3> <div class="acc-section"> <div class="acc-content"> Контент блока 3 </div> </div> </li> </ul> Здесь простой текст раздела 1 </div> </div> </li><li> <h3>Раздел 2</h3> <div class="acc-section"> <div class="acc-content"> Здесь текст раздела 2 </div> </div> </li> <li> <h3>Раздел 3</h3> <div class="acc-section"> <div class="acc-content"> Здесь текст раздела 3 </div> </div> </li> </ul> |
