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
Комментарии:
Плагин отнесен в категорию vertical accordion
Easy Accordion — Best Accordion FAQ Plugin for WordPress
(202 общий рейтинг)
The best responsive and drag & drop Accordion FAQ builder plugin. User-friendly, Highly Customizable &…
ShapedPlugin 40 000+ активных установок Протестирован с 6.1.1 Обновлен 2 недели назад
Accordion and Accordion Slider
(13 общий рейтинг)
Аккордеон и слайдер аккордеона (горизонтальный и вертикальный) — адаптивный и сенсорный аккордеон для веб-сайта WordPress.…
WP OnlineSupport, Essential Plugin 3 000+ активных установок Протестирован с 6.1.1 Обновлен 1 месяц назад
Responsive Accordion Slider
(1 общий рейтинг)
Responsive Accordion Slider is fully resonsive, user-friendly, touch-enabled WordPress plugin having horizonatal and vertical slider…
TechKnow Prime 100+ активных установок Протестирован с 6.1.1 Обновлен 1 месяц назад
WP jQuery Accordion Menu
(0 общий рейтинг)
Creates vertical dropdown menus from wordpress pages with wp_list_pages function using jQuery.
Tuncay Demirtepe 50+ активных установок Протестирован с 3.3.2 Обновлен 11 лет назад
B Accordion — Add Horizontal / Vertical Accordion in WordPress
(0 общий рейтинг)
Make fully functional accordion to display various contents in a professional way.
bPlugins LLC 40+ активных установок Протестирован с 6.0.3 Обновлен 4 месяца назад
accordion-block
(2 общий рейтинг)Accordion image block new WordPress block editor
asphaltthemes, ashiquzzaman 10+ активных установок Протестирован с 5.0.18 Обновлен 4 года назад
Accordion Plugin by Themes Awesome
(0 общий рейтинг)
Accordion Awesome is a WordPress accordion plugin that helps you create FAQs, feature lists, pictures,…
Themes Awesome Менее 10 активных установок Протестирован с 6. 1.1 Обновлен 2 недели назад
WP Nice Accordion — Best FAQ Accordion Plugin for WordPress
(0 общий рейтинг)
WP Nice Accordion plugin is fully responsive and drag & drop Accordion plugin. Very user…
ReacThemes Менее 10 активных установок Протестирован с 6.0.3 Обновлен 4 месяца назад
5+ лучших плагинов jQuery Accordion 2022 (бесплатных и платных)
по Neeraj Agarwal
«Аккордеоны полезны, когда вы хотите переключаться между скрытием и отображением большого количества контента»
Аккордеоны получили свое название от музыкального инструмента, так как они содержат вертикально или горизонтально сложенные панели, на которых видны только их подписи. Когда на эти панели нажимают, они сжимаются или растягиваются, как и их тезка, раскрывая больше или меньше информации, связанной с этой видимой подписью.
Итак, если вы ищете виджеты или плагины Accordion, посмотрите ниже. Вот список некоторых БЕСПЛАТНЫХ и платных плагинов Accordion для вашего сайта: —
- Бесплатные плагины для аккордеона
- Платные аккордеонные плагины
Платные плагины для аккордеона
1. Ползунок-аккордеон – адаптивный и сенсорный аккордеонAccordion Slider, вероятно, лучший слайдер jQuery на рынке. Облегченная версия Accordion Slider позволяет создавать простые слайдеры изображений, полностью адаптивные и удобные для мобильных устройств. Accordion Slider позволяет изменять раскладку аккордеона для разных размеров экрана.
Особенности
Для дизайнеров
- Имеется 2 полностью чувствительных режима: автоматический и пользовательский.
- Благодаря функции Touch-enabled вы можете легко касаться и касаться жестов на мобильных устройствах и перетаскивать мышью на настольных устройствах.
- Динамический макет автоматически меняет ориентацию с горизонтальной на вертикальную или наоборот.
- Поддерживает 2 типа слоев: анимированные и статические.
- Когда панель открыта, вы можете легко изменить фоновое изображение с помощью Image swap.
Для разработчиков
- Вы можете легко удалить модули, чтобы уменьшить размер файла, так как плагин модульной архитектуры состоит из ядра и 12 дополнительных модулей.
- Переходы CSS3 и RequestAnimationFrame, разработанные с использованием современных методов анимации, используются для обеспечения плавной анимации.
- Аккордеон предоставляет несколько общедоступных методов и функций обратного вызова, а также возможность изменять свойства во время выполнения с помощью своего мощного API.
Нажмите здесь для получения более подробной информации
2. jQuery Accordion
Еще один — jQuery Accordion, компонент-аккордеон, основанный на Javascript и CSS. Он имеет адаптивный и плавный макет, систему сеток, 8 предустановленных стилей и многое другое. Лучшее в этом плагине то, что он также обеспечивает эффекты затухания содержимого.
Особенности
- 8 стилей
- Сетка
- Эффекты Javascript/CSS3
- Поддержка пиктограмм
- Жидкостная компоновка
- Ответный
- Кроссбраузерный
- Простота использования
Нажмите здесь для получения более подробной информации
3. Аккордеонное меню jQuery
«JQuery Accordion Menu» — это меню с аккордеонным поведением. Плагин имеет несколько параметров, которые можно настроить, чтобы настроить вертикальное меню-аккордеон. Их можно установить либо через панель управления виджетом, либо путем передачи параметров в шорткоде.
Особенности
- Кроссбраузерность
- 6 цветовых решений
- Неограниченное количество подменю
- Иконки от Font Awesome
- Эффект CSS3
- Хорошо задокументировано
- Простота использования и настройки
Нажмите здесь для получения более подробной информации
4. Аккордеон | Часто задаваемые вопросы | Свернуть – Надстройки для Visual Composer
Аккордеон — это современная надстройка для визуального композитора. Он имеет более 26 стилей с огромными возможностями. В плагине вы получите множество аккордеонов, которые вы можете выбрать в соответствии с требованиями вашего сайта.
Особенности
- 26+ уникальных стилей * Скоро появится больше стилей!
- Адаптивный дизайн
- Полностью настраиваемый
- Неограниченное количество цветов
- Поддерживается основной браузер
- Совместимость с последней версией WordPress
- Чистое кодирование, проверка W3c
- Первая поддержка 24/7
- Шаг за шагом Хорошо задокументировано
Нажмите здесь для получения более подробной информации
Бесплатные плагины для аккордеона
1. Легко реагирующие вкладки на аккордеонАдаптивные вкладки на аккордеон — это деликатный плагин аккордеона jQuery, который оптимизирует обычные вертикальные и горизонтальные вкладки на нескольких устройствах, таких как — веб, планшеты, мобильные устройства ( iPad и iPhone. Плагин адаптируется к размеру экрана и соответственно меняет свое действие.
Характеристики
- Горизонтальные/вертикальные вкладки для гармошки.
- Аккордеон и вкладки полностью разработаны с помощью jQuery.
- Поддерживает несколько наборов вкладок на одной странице.
- Кроссбраузерная совместимость (IE7+, Chrome, Firefox, Safari и Opera).
- Поддержка нескольких устройств (Интернет, планшеты и мобильные устройства).
- (работает с несколькими экземплярами) Прямая ссылка на указанную вкладку.
- Плагин обрабатывает все состояния вкладок при переходе со страницы и последующем возврате с использованием вперед/назад (если браузер поддерживает History API).
- Вложенные вкладки.
Нажмите здесь для получения более подробной информации
2. Адаптивные вкладки jQuery
Этот подключаемый модуль jQuery Bootstrap обеспечивает функциональность адаптивных вкладок. Вкладки превращаются в аккордеон, когда достигают точки останова CSS. Аккордеон, сформированный с помощью этого плагина, имеет горизонтальную природу. Вы можете использовать этот плагин в качестве решения для элегантного отображения вкладок на рабочем столе, планшете и мобильном телефоне.
Особенности
- Вкладки преобразуются в аккордеон на основе точки останова.
- Для технического переключения вкладок (на основе классов) вы можете использовать jQuery/javascript.
- Использует CSS для просмотра на ПК/планшетах/мобильных устройствах.
- Имеет события обратного вызова для событий вкладки.
- Вкладки можно открывать с помощью автоповорота, хэшей URL, свернутых (необязательно), отключенных и т. д.
- Вкладки управляются методами API.
- Кроссбраузерная совместимость (IE7+, Chrome, Firefox, Safari и Opera).
- Поддержка нескольких устройств (Интернет, планшет, мобильный и т. д.).
Нажмите здесь для получения более подробной информации
Заключение –
Это 5+ [бесплатных + платных] лучших аккордеонных плагинов для вашего сайта. Надеемся, что вы нашли продукт, который соответствует вашим потребностям и требованиям.
Вам также может понравиться –
- Проверка формы jQuery
- Плагины WordPress для конструктора страниц
Поднимите свой электронный маркетинг на новый уровень!
Начните использовать MailGet и испытайте конструктор электронной почты мирового класса, создавайте информационные бюллетени по электронной почте в одно мгновение и отправляйте отличные электронные письма
своей аудитории. Занимайтесь потрясающим маркетингом по электронной почте по доступной цене.
Наше решение
Свяжитесь с нами
Компания
Ресурсы
Аналитика
FormGet © 2021. Все права защищены.
Сделано с любовью для вас
30+ jquery accordions — Бесплатный код + демонстрации
1. Простой скользящий аккордеон
Автор: Rajeshdn (Cool_lazyboy)
Ссылки: Исходный код / Демо
Созданы на: сентябрь
. Сделано с: HTML, CSS, JS
2. Аккордеонный слайдер
Автор: Yusuke Saio (Saio-th)
Ссылки: Исходный код / демонстрация
Создано по телефону: 12 сентября 2019 г.
Сделано с: HTML, SCSS, JS
7 3777 3777. Аккордеоны изображения
Изображение аккордеонов демо с помощью swiper. js
Автор: январь (январь)
Ссылки: исходный код / Демо
Создано: марта 24 марта 2019 г.
Сделано с помощью: HTML, SCSS, JS
Теги: аккордеонов изображений, swiper.js, анимация, событие прокрутки, flex
4. Аккордеон с кнопкой закрытия
Это простой пример того, как вы может создать аккордеон из обычного тега HTML и пары строк jquery. Мы часто прибегаем к использованию сложных паттернов и написанию длинного кода при создании слайдеров и аккордеонов, совершенно забывая, что есть очень простые способы решения этих проблем…
Читать подробности
Автор: Андрей Шарапов (Андрейшарапов)
Ссылки: Исходный код / демонстрация
Созданы: марта 17,
, сделанный с: , PUG 17 марта,
. Препроцессор CSS: Sass Препроцессор JS: Нет Препроцессор HTML: Pug Популярные слова взяты с сайта Dictionary.com.
Автор: Halida astatin (Halidaa)
Ссылки: исходный код / демонстрация
Создано: 4 июня 2018
Сделано с: HTML, CSS, JS
9 9000 2 . CPC-DT-DD, CODEPENCHALLENGE, ACCERION, FAQ, Dribbble
6. App Meteo Animation CSS Easy
Автор: Sergio (SofiaSergio)
Ссылки: исходный код / Demo
.0029 7 марта 2018 г.
Сделано с помощью: HTML, CSS, JS
Теги: анимация, приложение, макет, css, наведение мыши
)
Ссылки: исходный код / демонстрация
Создано: 30 января 2018 г.
Сделано с: HTML, CSS
8. Arai Accorction
HTML, CSSSS и JSSONION ACCOMPIONION DII-CONCONIONION
HTML, CSSSSONIONION U-CONPIONIONIONION. для масштабируемых проектов.
Ссылки: исходный код / демонстрация
Созданы: 17 апреля 2017 г.
9. Ziehharmonika
A Jquery Accordin
Links: 92929.9002 9002 . : 1 марта 2017 г.
10. Simple JQuery Multi Accordion
Simple JQuery Multi Accordion
Ссылки: Исходный код / Демо
Создана по телефону: 20 апреля 2017 г.
11. Доступная аккордеонная система jQuery
ДЖКЕРИЧЕСКАЯ Аккордеонная система, используя ARIA
Ссылки: Исходный код / DEMO
Созданы: апреля 23,
.
. HTML, CSS, JS12. Аккордеон JQuery
👆 Отзывчивый, работающий на CSS, плагин аккордеона jQuery.
Ссылки: Исходный код / Демо
Дата создания: 22 июня 2014 г.
13. JQUERY Accordion
JQUERY ACCERCE
Автор: Vikas Verma (Vikasverma93)
Ссылки: Source Code / DEMO
Созданы на: декабря
9003Теги: jquery, аккордеон
14. Меню «Гармошка» с использованием Jquery
Здравствуйте! Этот пример того, как использовать меню «Аккордеон» в jquery и некоторые эффекты CSS > Спасибо <
Автор: NOOR AL-HASSAN (N00R_ALHASSAN1)
Ссылки: Исходный код / демонстрация
Создано: 26 октября 2014 г.
928 Сделано с: HTML, CSSSS, JS . Теги: меню аккордеона в jquery15. Простой отзывчивый JQuery Accordion
Причина сборки В ответ на то, что я не нашел ничего, что мне было нужно, я решил создать его с нуля. Вдохновение https://dribbble.com/shots/1257916 Freebie-Flat-Accordion? UTM_SOURCE = Bublboard_SHOT & UTM_CAMPAIGHT = PSDCHAT & UTM_CONTENT = Freebie%3A%20FLAT%20ACCORDION & UTM_MED = Social_SH …
Прочтите больше
Автор: SHAUN SHAUN MICKALL ( ( SHAUN SHAUN SHAUN MICKALL). / Demo
Дата создания: 14 января 2019 г.
Сделано с помощью: HTML, SCSS, JS
Теги: es6, jquery, аккордеон, функция стрелки, scss
16. Навигационное меню JQuery Accordion
Многоразовое навигационное меню JQuery Accordion, работает с любым количеством категорий и подкатегорий
Автор: James Thomas Almond (jamestalmond)
Ссылки: 0 Код Дата создания: 9 февраля 2017 г.
Сделано с помощью: HTML, SCSS, JS
Теги: jquery, аккордеон, меню, javascript, мобильный
17. Простое расширение области содержимого Аккордеон
Простой аккордеон CSS и JQuery, расширяющий область содержимого с заданной начальной высоты до конечной высоты. Конечная высота определяется автоматически на основе высоты скрытого содержимого. На одной странице можно использовать несколько экземпляров без изменения кода.
Автор: Джеймс Маретт (OastOne)
Ссылки: Исходный код / Демо
Создано: 11 августа 2020 г.
Сделано с :8HTML, CSS, JS
Теги: расширение, переход, чтение, аккордеон, простой
18. Простой JQuery Accordion Caret
У этого аккордеона есть значок вставки, который меняется, когда аккордеон активен.
Автор: Хелен (Хэтч)
Ссылки: Исходный код / демонстрация
Создано на: 5 февраля 2020
Сделано с: PUG, SCSS, JS
CS. процессор: SCSS
Дж.
Ссылки: Исходный код / Демо
Создано: 5 августа 2020 г.
Сделано с: HTML, CSS, JS
Теги: , cs, jquery, аккордеон0003
20. Супер простой фрагмент аккордеона JQUERY
Автор: QUSAY SAAD (QUSAYSAAD)
Ссылки: исходный код / демонстрация
Созданы: октября 2
. CSS, JS
21. Вертикальная гармошка (HTML5 + JQuery)
Я создал вертикальную гармошку с помощью jQuery. Идея заключалась в том, чтобы один статический столбец был для меню или заголовка, а остальные были интерактивными. Следующее обновление: отображение/скрытие контента при открытии и закрытии Responsive Bootstrap/SASS edition
Автор: Мария Падилла (Mariapadilla)
Ссылки: исходный код / демонстрация
Создано: 29 октября 2014 г.
Сделано с: HTML, CSS, JS
8
8
8
8
8
8
8
8 . jquery, html5, вертикальный аккордеон, аккордеон
22. Вертикальное аккордеонное меню с использованием JQuery и CSS3
Изящное вертикальное аккордеонное меню для вашего следующего веб-сайта/приложения. В заголовках используется иконочный шрифт Font Awesome. Градиенты, переходы и тени CSS3 использовались в демонстрации вместе с минималистичным использованием jQuery для скольжения списков ссылок. Изящно деградирует до IE8. Работает со всеми основными бровями…
Читать Подробнее
Автор: ARKEV (ARKEV)
Ссылки: Исходный код / демонстрация
Создано: 12 апреля 2013
Сделано с: html, cssss, JS.
. Теги: меню, jquery, css323. Гибкий аккордеон на вертикальные вкладки
Переход с аккордеона на вертикальные вкладки. Аккордеон имеет интерактивные h3 с функцией прокрутки, когда < 480 пикселей. При >481px вертикальные вкладки используются для переключения, и отображается только активная панель. Работа в процессе… Несколько проблем со специальными возможностями, которые необходимо исправить: -альтернатива дис…
Читать Подробнее
Автор: Jacob Rotton (Jrotton)
Ссылки: исходный код / демонстрация
Созданы: декабрь 13, JS
Сделано с: HTML, CS3
.
Теги: аккордеон, вкладки
24. Css, JQuery Вертикальный полноэкранный аккордеон
Автор: kaleem (mahesarkaleem)
Ссылки: Создать 929 Исходный код 3: Демо
0029 1 сентября 2018 г.
Сделано с: HTML, SCSS, JS
25. Горизонтальное изображение аккордеон JQUERY
Автор: Рагнарок (Рагнарок)
Ссылки: Soucdecok / Demo
88
. : 19 января 2017 г.
Сделано с помощью: Pug, Sass, JS
CSS препроцессор: Sass
JS препроцессор: нет
препроцессорPug
26. Accordion Slider
Accordion Slider with GSAP and jQuery
Author: Garrett (gnevin)
Links: Source Code / Demo
Created on: January 15, 2017
Сделано с помощью: HTML, CSS, JS
Теги: слайдер, gsap, greensock, tweenmax, аккордеон
Примеры jQuery Accordion
1. Простой скользящий аккордеон
Автор: Rajeshdn (Cool_lazyboy)
Ссылки: Исходный код / демонстрация
Создано: 9 сентября 2019 г.
Сделано с: HTML, CSS, JS
2. Acondion Of:
HTML, CSS, JS.
27.27. Автор: Юсуке Сайо (saio-th)Ссылки: Исходный код / Демо
Дата создания: 12 сентября 2019 г.
Изображение аккордеонов Демо с помощью SWIPER.JS
Автор: январь (январь)
Ссылки: Исходный код / демонстрация
Создано: марта 2019 2019
928 . , SCSS, JS
Теги: аккордеоны изображений, swiper.js, анимация, событие прокрутки, flex
4. Аккордеон с кнопкой закрытия
Это простой пример того, как вы можете создать аккордеон из обычного HTML тег и пару строк jquery. Мы часто прибегаем к использованию сложных паттернов и написанию длинного кода при создании слайдеров и аккордеонов, совершенно забывая, что есть очень простые способы решения этих проблем…
Читать подробности
Автор: Андрей Шарапов (Андрейшарапов)
Ссылки: Исходный код / демонстрация
Созданы: марта 17,
, сделанный с: , PUG 17 марта,
.
Препроцессор CSS: Sass
Препроцессор JS: Нет
Препроцессор HTML: Pug
Популярные слова взяты с сайта Dictionary.com.
Автор: Halida astatin (Halidaa)
Ссылки: исходный код / демонстрация
Создано: 4 июня 2018
Сделано с: HTML, CSS, JS
9 9000 2 . CPC-DT-DD, CODEPENCHALLENGE, ACCERION, FAQ, Dribbble
6. App Meteo Animation CSS Easy
Автор: Sergio (SofiaSergio)
Ссылки: исходный код / Demo
.0029 7 марта 2018 г.
Сделано с помощью: HTML, CSS, JS
Теги: анимация, приложение, макет, css, наведение мыши
)
Ссылки: Исходный код / Демо
Создано: 30 января 2018 г.
Сделано с: HTML, CSS
jQuery Accordion Plugins
6 1.0339
HTML, CSS и JS аккордеон UI-компонент для масштабируемых проектов.
Ссылки: исходный код / демонстрация
Созданы: 17 апреля 2017 г.
2. Ziehharmonika
Acquery Accordin
. : 1 марта 2017 г.
3. Simple JQuery Multi Accordion
Simple JQuery Multi Accordion
Ссылки: исходный код / демонстрация
Созданы: 20 апреля 2017 г.
4. Доступная аккордеонная система jQuery
jQuery Accordior System, с использованием ARIA
Links: 9. Demo Code Code / Demo Demo / Demo Demo / Demo Code / Demo Code / Demo.
Дата создания: 23 апреля 2015 г.
5. Аккордеон JQuery
👆 Отзывчивый, работающий на CSS, jQuery плагин аккордеона.