Главная » Файлы » Прочие скрипты » jQuery
Многоуровневые выезжающие блоки в стиле аккордеон на jQuery
23.06.14, 09:03:18

Скачать файл



Неплохой, чётко работающий и легко настраиваемый плагин для отображения любого вашего контента в компактном и стильном исполнении

Для начала посмотрите ДЕМО

Установка:

На страницах, где будет использован данный плагин, после /head вставляйте:
Код
<link rel="stylesheet" href="/css/style.css" type="text/css" />


Далее в то место, где будет сам блок с выезжающими панелями, всавляйте:
Код
<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>

  <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>


Далее залейте файлы из прикреплённого архива в корень сайта следующим образом:
style.css - в папку css
script.js - в папку js
header_over.gif и header.gif - в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Многоуровневые, аккордеон, блоки, на, JQuery, стиле, выезжающие
Просмотров: 492 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: