Главная » Файлы » Прочие скрипты » jQuery
Неплохой вертикальный тёмный аккордеон - слайдер на CSS3 и плагин Akordeon-A Stylo на jQuery для uCoz
24.06.14, 17:09:46

Скачать файл



Классный аккордеон - слайдер любого вашего контента. Мне очень понравилось то, что в слайдере не используются картинки и всё оформление выполнено на чистом CSS3

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

Вот моё тестирование в фидле: КЛИК

Установка:

После < /head > на нужных страницах вставляйте:
Код
<link href="/css/jquery.akordeon.css" rel="stylesheet" />  
  <script src="/js/jquery.akordeon.js"></script>  
  <script>  
  $(document).ready(function () {  
  $('#buttons').akordeon();  
  });  
  </script>


Следующий код в то место, где будет сам слайдер:
Код
<div class="akordeon" id="buttons">  
<div class="akordeon-item expanded">  
<div class="akordeon-item-head">  
<div class="akordeon-item-head-container">  
<div class="akordeon-heading">Заголовок 1</div>  
</div>  
</div>  
<div class="akordeon-item-body">  
<div class="akordeon-item-content">Любой ваш текст 1</div>  
</div>  
</div>  
<div class="akordeon-item">  
<div class="akordeon-item-head">  
<div class="akordeon-item-head-container">  
<div class="akordeon-heading">Заголовок 2</div>  
</div>  
</div>  
<div class="akordeon-item-body">  
<div class="akordeon-item-content">Любой ваш текст 2</div>  
</div>  
</div>  
<div class="akordeon-item">  
<div class="akordeon-item-head">  
<div class="akordeon-item-head-container">  
<div class="akordeon-heading">Заголовок 3</div>  
</div>  
</div>  
<div class="akordeon-item-body">  
<div class="akordeon-item-content">Любой ваш текст 3</div>  
</div>  
</div>  
  </div>


Скрипт из прикреплённого архива залейте в папку js и css стиль в папку css

HTML код второго аккордеона без иконок можете сами выдернуть из исходника первого демо

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Тёмный, Вертикальный, аккордеон, Akordeon-A, неплохой, плагин, на, CSS3, Stylo, слайдер
Просмотров: 492 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: