Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Аккордеон на jquery: jQuery. Пишем аккордеон с применением эффектов

Содержание

Аккордеон меню на jQuery | Frontips.ru

Напишем простое и универсальное аккордеон меню на jQuery

extension

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.

eco

Dolor sit amet.

Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.

fingerprint

Rerum necessitatibus

Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi

Этот пример на Codepen

Подписаться на Telegram-канал блога

Создаём HTML основу

Пункты меню располагаются в родительском блоке <div></div>

Каждый пункт меню <div></div> имеет заголовок <div></div> и область контента <div></div>

<section>
  <div> <!-- родительский блок -->
    <div> <!-- блок пункта меню -->
      <div> <!-- блок заголовка -->
        <div><span>extension</span></div>
        <div>Lorem ipsum dolor sit amet. </div>
      </div>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.</div> <!-- блок контента -->
    </div>
    <div>
      <div>
        <div><span>eco</span></div>
        <div>Dolor sit amet.</div>
      </div>
      <div>Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.
  </div>
    </div>
    <div>
      <div>
        <div><span>fingerprint</span></div>
        <div>Rerum necessitatibus</div>
      </div>
      <div>Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi</div>
    </div>
  </div>
</section>

Опишем стили CSS

При добавлении активного класса .about-item_active блоку .about-item зададим стили для его элементов .about-item__head и .about-item__icon

.about {
  padding: 60px 0;
}
.about__item:not(:last-child) {
  margin-bottom: 15px;
}
.about-item__head {
  background: #283845;
  padding: 15px 30px;
  color: #fff;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; /* отключаем выделение текста при нажатии на блок заголовка */
  display: flex;
  align-items: center;
  transition: 0.
  3s ease;
}
.about-item__head:hover {
  background: #24323e;
}
.about-item__title {
  font-weight: 700;
}
.about-item__icon {
  margin-right: 15px;
  line-height: 1;
  transition: 0.3s ease;
}
.about-item__body {
  padding: 30px;
  font-size: 16px;
  background: #fff;
  border-radius: 8px;
  color: #283845;
  display: none;
  margin-top: 10px;
}
.about-item_active .about-item__head {
  background: #22303b; /* в активном состоянии блока .about__item фон заголовка .about-item__head меняет цвет */
}
.about-item_active .about-item__icon {
  color: #8cb369; /* в активном состоянии блока .about__item иконка .about-item__icon меняет цвет */
}

Пишем jQuery код

jQuery код с комментариями

$(document).ready(function(){ // DOM готов для взаимодействия с ним
  function accordion(parentSelector, itemSelector, itemActiveClass, headSelector, contentSelector, duration) { // объявляем функцию и принимаем параметры
    let locked = false // объявляем переменную для блокировки клика при активной анимации
    $(parentSelector).
 
 click(function(e){ // при клике на родительский блок, селектор которого передаем первым параметром (parentSelector)
      const target = $(e.target) // записываем в константу элемент, где был клик
      const item = target.closest(itemSelector) // ищем ближайший родительский блок, где был клик, по селектору, который передаем вторым параметром (itemSelector)
      const itemHead = item.find(headSelector) // ищем заголовок (4й параметр) в блоке, где был клик
      const itemContent = item.find(contentSelector) // ищем блок контента в блоке (5й параметр), где был клик
      const siblings = item.siblings() // ищем соседние блоки, расположенные на том же уровне, что и блок, где был клик
      const siblingsContent = siblings.find(contentSelector) // ищем блок контента(5й параметр) у соседских блоков
      if (!target.closest(headSelector).length) return // если клик был не на блоке заголовка, прерываем функцию, то есть ничего не делаем
      if (locked) return // если клик заблокирован, тоже прерываем функцию
      if (!item.
  hasClass(itemActiveClass)) { // если блок, где был клик, не имеет активного класса
        locked = true // блокируем клик
        siblings.removeClass(itemActiveClass) // удаляем у соседских блоков активный класс
        siblingsContent.slideUp(duration) // сворачиваем блок контента у соседских блоков (6 параметр - duration - продолжительсность анимации)
        item.addClass(itemActiveClass) // добавляем активный класс блоку, где был клик
        itemContent.slideDown(duration, function(){ // разворачиваем блок контента у блока, где был клик, после окончания анимации запускаем другую функцию, чтобы снять блокировку клика
          locked = false
        })
      } else { // если блок, где был клик, имеет активный класс
        locked = true // блокируем клик
        item.removeClass(itemActiveClass) // удаляем активный класс блоку, где был клик
        itemContent.slideUp(duration, function(){ // сворачиваем блок контента у блока, где был клик, после окончания анимации запускаем другую функцию, чтобы снять блокировку клика
          locked = false
        })
      }
    })
  }
  accordion('.
 
 
 about-items', '.about-item', 'about-item_active', '.about-item__head', '.about-item__body', 300) // запускаем функцию с параметрами
  accordion('.briefly-cards', '.briefly-card', 'briefly-card_active', '.briefly-card__head', '.briefly-card__text', 600) // если будут еще похожие меню, но с другими названиями классов, то запускаем эту же самую функцию, передавая ей просто другие параметры
})
Передаваемые параметры
  1. parentSelector — селектор родительского блока — '.about-items'
  2. itemSelector — селектор блока пункта меню — '.about-item'
  3. itemActiveClass — активный класс блока пункта меню — 'about-item_active'
  4. headSelector — селектор блока заголовка — '.about-item__head'
  5. contentSelector — селектор блока контента — '.about-item__body'
  6. duration — продолжительность анимации разворачивания/сворачивания блока контента — 300
Описание некоторых нюансов
  1. Блокировка клика нужна для того, чтобы при многократном клике на заголовок анимация не запускалась несколько раз. Как только анимация запускается, блокируем клик, как только анимация заканчивается, снимаем блокировку
  2. Параметры передаем в том порядке в котором они записаны. В данном случае параметры передаем строками в кавычках. Если это селектор, не забываем ставить точку ('.about-item'). Если это название класса, указываем без точки ('about-item_active')
  3. Последним параметром передаем число без кавычек — продолжительность анимации разворачивания/сворачивания блока контента

Полезные ссылки

Обработчик готовности дерева DOM — .ready()

Объект event — function(e){}

Переменные и константы — let и const

Ближайший подходящий предок — .closest()

Поиск элементов внутри выбранных — .find()

Поиск элементов лежащих на одном уровне — .siblings()

Добавление класса — .addClass()

Удаление класса — .removeClass()

Разворачивание и сворачивание элементов — .slideDown() .slideUp()

19 Jquery аккордеонов и экспандеров для сайта

Главная » Техноблог » Слайдеры, меню, скрипты на сайт » 19 Jquery аккордеонов и экспандеров для сайта

1.

javascript плагин аккордеон «TinyAccordion»

Отображение информации с эффектом аккордеона. Поддержка нескольких уровней.

Демо

Скачать

2. jQuery плагин «Easy Expand»

Плагин для реализации раскрывающейся области. Контент появляется при нажатии на ссылку.

Демо

Скачать

3. Красивый слайдер-аккордеон на jQuery

Демо

Скачать

4. jQuery плагин аккордеон «Jaws»

Плагин для реализации блока последних новостей с эффектом аккордеона и постраничным разбиением.

Демо

Скачать

5. CSS jQuery аккордеон

Аккуратный аккордеон с использованием jQuery.

Демо

Скачать

6. jQuery плагин «liteAccordion»

Создание слайдеров изображений в стиле горизонтального аккордеона. Три различных варианта плагина можете посмотреть на демонстрационной странице.

Демо

Скачать

7. jQuery плагин «Fade and slide»

Легкий плагин для отображения/скрывания информации в блоке.

Демо

Скачать

8. jQuery слайдер-аккордеон

Аккуратный jQuery слайдер в стиле аккордеон. Есть возможность установить автоматическую смену слайдов и время показа для каждого слайда.

Демо

Скачать

9. «Toggle Effect»

Плагин работает в двух вариантах: при нажатии либо наведении курсора мыши на ссылку, появляется скрытый контент.

Демо

Скачать

10. Вертикальный аккордеон на jQuery

Блок разъезжается при нажатии на него мышкой. При этом блоки можно прокручивать либо с помощью колеса мыши, либо при помощи стрелок вверх/вниз. На странице с демонстрацией представлено 5 вариантов исполнения.

Демо

Скачать

11. jQuery аккордеон

Демо

Скачать

12. Вертикальный аккордеон на jQuery

Раскрывающаяся область.

Демо

Скачать

13. Горизонтальный и вертикальный javascript аккордеон «Aga»

Плагин для отображения контента и изображений с эффектом аккордеона.

Скачать

14. Сетка-аккордеон

Вы, наверное, встречались с реализацией меню в виде аккордеона. Когда меню подобно аккордеону растягивается либо вертикально, либо горизонтально. Я предлагаю вам посмотреть расширенную реализацию этой техники, которая представляет собой сетку. При нажатии на какую-нибудь клетку, её границы разъезжаются по горизонтали и вертикали для отображения полного содержимого клетки

Демо

Скачать

15. Динамическая реализация страницы FAQ (вопрос-ответ)

На странице отображается список вопросов. У каждого вопроса имеется кнопка «ответ», по нажатию на которую выплывает ответ на интересующий вопрос. Внешний вид можно отредактировать в файле style.css

Демо

Скачать

16. Вертикальный jQuery аккордеон «Flexible Slide-to-top Accordion»

Область с контентом раскрывается при нажатии на ссылку. Плагин выполнен в двух вариантах: в одном случае раскрыть можно все блоки контента одновременно, во втором — при отркытии какого-либо одного блога сварачивается тот, что был развернут перед этим.

Демо

Скачать

17. jQuery плагин «Facets»

Плагин в стиле аккордеон для реализации необычной навигации на сайте. Для того чтобы посмотреть плагин в действии в различном исполнении, пройдитесь по ссылкам Demo1 — Demo4 на демонстрационной странице.

Демо

Скачать

18. jQuery вкладки-аккордеон

Нет возможности поставить прямую ссылку, поэтому ссылка «Скачать» ведет на страницу, с которой вы сможете загрузить скрипт.

Демо

Скачать

19. JQuery аккордеон 

Демо

Скачать

 

21.05.2013

    Комментарии:

    33 jQuery Accordions

    Коллекция бесплатных вертикальных и горизонтальных аккордеонов jQuery UI примеров кода и плагинов от Codepen и GitHub. Обновление коллекции сентября 2021 года. 2 новых предмета.

    1. Аккордеоны CSS
    2. Аккордеоны Bootstrap
    3. Аккордеоны React
    4. Аккордеоны с попутным ветром
    5. HTML
      и с CSS
    1. Примеры jQuery Accordion
    2. Аккордеонные плагины jQuery
    О коде

    Аккордеон jQuery со стрелкой (без начальной загрузки)

    Просто, но полезно.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: font-awesome.css

    О коде

    Раскрывающийся список/аккордеон

    Анимированный аккордеон в jQuery.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: font-awesome.css

    О коде

    Аккордеон по индивидуальному заказу справа

    Пользовательский аккордеон

    jQuery со шрифтом Material Design Iconic.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: material-design-iconic-font.css

    О коде

    Аккордеон jQuery

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Верхняя часть спирального аккордеона

    Аккордеон с анимацией прокрутки в jQuery.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Отвечает: да

    Зависимости: ionicons.css

    О коде

    Аккордеон и схема Google

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Аккордеонные стили jQuery

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Простая раздвижная гармошка

    Простая вертикальная скользящая гармошка с небольшим количеством jQuery.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Аккордеонный слайдер

    Простой горизонтальный слайдер-аккордеон jQuery.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Аккордеоны для изображений

    Демо-аккордеоны изображений с swiper. js

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: swiper.css, swiper.js

    С код

    Гармошка с кнопкой закрытия

    Это простой пример того, как можно создать аккордеон из обычного тега HTML и пары строк jQuery. Мы часто прибегаем к использованию сложных шаблонов и написанию длинного кода при создании слайдеров и аккордеонов, совершенно забывая, что есть очень простые способы решения этих задач. Здесь не нужно хорошо разбираться в коде, чтобы его стилизовать и добавить анимацию.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Простой отзывчивый аккордеон jQuery

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: font-awesome.css

    О коде

    Адаптивный аккордеон jQuery

    Отзывчивый аккордеон jQuery, который позволяет пользователю переходить от формы к форме, щелкая вкладки, используя клавиши со стрелками и нажимая предоставленные кнопки со стрелками. Создан с использованием jQuery и Bootstrap.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: font-awesome.css, bootstrap.css

    О коде

    Аккордеон с тегами dt и dd.

    Аккордеон

    jQuery с использованием списков определений.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: font-awesome.css

    О коде

    Многоуровневый аккордеон CSS-JS

    Многоуровневый аккордеон CSS и JS (jQuery). В нем есть функция предварительного открытия группы списка при начальной загрузке страницы путем простого добавления класса is-open к элементу списка, который имеет класс has-children . HTML и CSS написаны с использованием синтаксиса БЭМ.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Отвечает: да

    Зависимости: font-awesome. css

    О коде

    CSS-анимация для jQuery Accordion

    Аккордеон для метео-приложения на jQuery с анимацией CSS.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: font-awesome.js

    О коде

    Аккордеон

    Меню аккордеона jQuery.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: font-awesome.css

    О коде

    Меню навигации jQuery Accordion

    Многоразовое навигационное меню jQuery-аккордеон, работает с любым количеством категорий и подкатегорий.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Отвечает: да

    Зависимости: —

    О коде

    Аккордеонное меню

    Слайд-меню «Гамбургер» с jQuery.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: jquery. js

    О коде

    4 строки Аккордеон jQuery

    Простой аккордеон jQuery.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Аккордеон 3D

    Простой аккордеон jQuery с трехмерным эффектом складывания бумаги.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Аккордеонный профиль

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: font-awesome.css

    О коде

    Аккордеон jQuery

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: font-awesome.css

    С код

    Нахальный аккордеон

    Простой аккордеон только на CSS, созданный с помощью Sass в первую очередь для динамической цветовой схемы.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: font-awesome.css, bootstrap.js, lastoftype.js

    О коде

    Аккордеон Мультименю

    Простое, стильное и современное вертикальное меню-аккордеон.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: нет

    Зависимости: font-awesome.css

    О коде

    jQuery (без пользовательского интерфейса) Аккордеон

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Простой аккордеон Sass/jQuery

    Аккордеон

    CSS3/Sass/jQuery, который имеет несколько простых анимаций со стрелками, полностью выполненных в CSS (состояния скольжения и щелчка, выполненные с помощью jQuery).

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Аккордеон с jQuery

    Простой аккордеон с jQuery.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Араи Аккордеон

    HTML, CSS и JS аккордеон UI-компонент для масштабируемых проектов. Удобство и доступность: совместимость с WAI ARIA 1.1.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Зегармоника

    Легкий плагин аккордеона jQuery.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Простой мультиаккордеон Jquery

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: bootstrap. css

    О коде

    Доступная аккордеонная система jQuery

    Этот плагин jQuery преобразует простой список hx и div в фантастическую блестящую аккордеонную систему, используя ARIA.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    О коде

    Аккордеон jQuery

    Отзывчивый, на основе CSS, плагин аккордеона jQuery. Jquery Accordion использует переходы CSS для анимации открытия/закрытия с откатом к анимации jQuery, когда переходы CSS не поддерживаются. Чтобы использовать его в своем проекте, требуется небольшая конфигурация или код.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: —

    Аккордеонные плагины jQuery — Страница 1

    Загрузите бесплатно jQuery Accordion Menu, Accordion Slider и другие плагины в стиле Accordion в нашем разделе jQuery Accordion. Страница 1 .

    ДемоСкачать
    — Аккордеон — 246 просмотров

    Плагин jQuery предоставляет простое автоматическое решение для создания плавных вертикальных гармошек из существующего содержимого страницы.

    ДемоСкачать
    — Аккордеон — 598 Просмотров

    Крошечный и простой в использовании плагин jQuery для создания горизонтального слайдера в стиле аккордеона из массива изображений.

    ДемоСкачать
    — Аккордеон — 1625 Просмотров

    Плагин wfAccordion позволяет разработчикам легко создавать адаптивные, доступные аккордеоны для секционного контента или часто задаваемых вопросов.

    ДемоСкачать
    — Аккордеон — 321 просмотров

    Действительно простой и легкий плагин jQuery для расширения и свертывания контента с плавными переходами.

    ДемоСкачать
    — Аккордеон — 474 Просмотров

    Простой аккордеонный пользовательский интерфейс на основе jQuery для организации и представления FAQ (часто задаваемых вопросов) на вашем веб-сайте.

    ДемоСкачать
    — Слайдер — 4146 просмотров

    Подключаемый модуль jQuery, который помогает создавать адаптивные, сенсорные, готовые к использованию на сетчатке слайдеры-аккордеоны для представления чего-либо на странице.

    ДемоСкачать
    — Аккордеон — 13383 Просмотров

    BeefUp — это легкий, отзывчивый плагин аккордеона jQuery, который позволяет вам переключать видимость элементов HTML со следующими функциями:

    ДемоСкачать
    — Аккордеон — 237 просмотров

    Подключаемый модуль jQuery, помогающий создавать доступное и удобное для мобильных устройств переключаемое содержимое на странице с поддержкой атрибутов ARIA, ролей и взаимодействия с клавиатурой.

    ДемоСкачать
    — Аккордеон — 481 просмотров

    Плагин jQuery, используемый для создания полностью доступных вкладок, аккордеонов и содержимого спойлеров с использованием атрибутов ARIA.

    ДемоСкачать
    — Аккордеон — 1704 Просмотров

    Используйте сценарий jQuery Responsive Tabs, чтобы превратить вкладки в аккордеонный интерфейс на небольших экранах, таких как мобильные устройства.

    ДемоСкачать
    — Аккордеон — 882 Просмотров

    Легкий, отзывчивый плагин jQuery для вкладок и аккордеона, который автоматически переключается между вкладками и макетами аккордеона в зависимости от размера экрана.

    ДемоСкачать
    — Аккордеон — 1525 просмотров

    Современный аккордеон jQuery с красивым и понятным пользовательским интерфейсом, который легко настраивать и расширять.

    ДемоСкачать
    — Галерея — 2534 Просмотров

    Бесплатная, доступная, семантическая, оптимизированная для SEO, невероятно быстрая, изящно разлагающаяся галерея аккордеона, созданная с помощью анимации jQuery и CSS3.

    ДемоСкачать
    — Меню — 2624 просмотров

    Минималистичный, чистый, плавный, оптимизированный для SEO компонент меню-аккордеона, созданный с использованием jQuery, CSS/CSS3, вложенных списков HTML и иконического шрифта Font Awesome.

    ДемоСкачать
    — Слайдер — 5490 просмотров

    Сценарий карусели слайдера jQuery, который позволяет переключаться между изображениями с плавными переходами развертывания/свертывания, как аккордеон.

    ДемоСкачать
    — Аккордеон — 3335 Просмотров

    Крошечный фрагмент jQuery, который поможет вам создать вертикальное меню-аккордеон (система часто задаваемых вопросов) с плавной анимацией развертывания и свертывания.

    ДемоСкачать
    — Аккордеон — 1765 просмотров

    Сверхмаленький, совместимый с Bootstrap, молниеносно быстрый компонент аккордеона, написанный на jQuery.

    ДемоСкачать
    — Меню — 123971 Просмотров

    metisMenu — это простой плагин меню jQuery для Bootstrap 3, который поможет вам создать сворачиваемое меню с анимированными эффектами аккордеона и поддержкой автоматического свертывания.

    Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *