30+ jQuery Accordions — Бесплатный код + демоверсии
1. Простой скользящий аккордеон
Автор: rajeshdn (cool_lazyboy)
Ссылки: Исходный код / Демо
9 0004 Дата создания: 9 сентября 2019 г.Сделано с: HTML, CSS, JS
2. Аккордеонный слайдер
Автор: Юсуке Сайо (saio-th)
Ссылки: Исходный код / Демо
Дата создания: 12 сентября 2019 г.
Сделано с помощью: HTML, SCSS, JS
3. Аккордеоны изображений
Демонстрация аккордеонов изображений с помощью Swiper.js
9000 5 Автор: januaryofmine (январьофмайн)
Ссылки: Исходный код / демо
Создано: 24 марта 2019 г.
Сделано с: HTML, SCSS, JS
Теги: аккордеонов изображений, swiper.
js, анимация, событие прокрутки, flex
4. Аккордеон с кнопкой закрытия
Это простой пример того, как можно создать аккордеон из обычного тега HTML и пары строк jquery. Мы часто прибегаем к использованию сложных шаблонов и написанию длинного кода при создании слайдеров и аккордеонов, совершенно забывая, что есть очень простые способы решения этих проблем…
Подробнее
Автор: Андрей Шарапов (andrejsharapov)
Ссылки: Исходный код / Демо
Дата создания: 17 марта 2019 г.
Сделано с помощью: Pug, Sass, JS
Препроцессор CSS: Sass
Препроцессор JS: Нет
Препроцессор HTML : Мопс
5. Аккордеон с тегами Dt и Dd
Аккордеон с использованием списков определений. Популярные слова взяты с сайта Dictionary.com.
Автор: Халида Астатин (halidaa)
Ссылки: Исходный код / демо
Создано: 4 июня 2018 г.
Сделано с: HTML, CSS, JS
Теги: cpc-dt-dd, codepenchallenge, аккордеон , часто задаваемые вопросы, дрибббл
6 Приложение Meteo Animation Css Ease
Автор: Sergio (SofiaSergio)
Ссылки: Исходный код / Демо
Создано: 7 марта 2018 г. 900 07
Сделано с помощью: HTML, CSS, JS
Теги: анимация, приложение, макет, css, наведение мыши
7. Вертикальное аккордеонное меню только с CSS
Автор: Eriksen (eriksenlezama)
Ссылки: Исходный код / Демо
Дата создания: Январь 30, 2018
Сделано с: HTML, CSS
8. Arai Accordion
HTML, CSS и JS аккордеон UI-компонент для масштабируемых проектов.
Ссылки: Исходный код / Демо
Дата создания: 17 апреля 2017 г.
9. Ziehharmonika
Аккордеонный плагин jQuery
Ссылки: Исходный код / Демо 90 007
Дата создания: 1 марта 2017 г.
10. Простой JQuery Multi Accordion
Simple Jquery Multi Accordion
Ссылки: Исходный код / Демо
Дата создания: 20 апреля 2017 г.
11 . Аккордеонная система с доступом к JQuery
jQuery Accessible Accordion System с использованием ARIA
Ссылки: Исходный код / Демо
Дата создания: 23 апреля 2015 г.
12. J Query Accordion
👆 Отзывчивый, на основе CSS, jQuery плагин аккордеона .
Ссылки: Исходный код / Демо
Дата создания: 22 июня 2014 г.
13. JQuery Accordion
007
Автор: Викас Верма (vikasverma93)
Ссылки: Исходный код / Демо
Создано: 8 декабря 2014
90 005 Сделано с помощью: HTML, CSS, JS
Теги: jquery, аккордеон
14.
Аккордеонное меню с использованием JqueryПривет, Этот пример того, как использовать аккордеонное меню в jquery и некоторые эффекты CSS > Спасибо <
Автор: Noor AL-Hassan (N00R_alha ссан1)
Ссылки: Исходный код / Демо
Создано: 26 октября 2014 г.
Сделано с помощью: HTML, CSS, JS
Теги: меню аккордеона в jquery
15. Простой отзывчивый JQuery Аккордеон
Причина сборки В ответ на то, что я не нашел ничего нужного, я решил построить его с нуля. Вдохновение https://dribbble.com/shots/1257916-Freebie-Flat-Accordion?utm_source=Clipboard_Shot&utm_campaign=PSDchat&utm_content=Freebie%3A%20Flat%20Accordion&utm_medium=Social_Sh…
Подробнее
Автор: Shaun MacDougall (shaunmac)
Ссылки: Исходный код / Демо
Создано: 14 января, 2 019
Сделано с: HTML, SCSS, JS
Теги: es6, jquery, аккордеон, функция стрелки, scss
16.
Меню навигации JQuery AccordionМногоразовое меню навигации jQuery аккордеон, работает с любым количеством категорий и подкатегорий
Автор: Джеймс Томас Алмонд (jamestalmond)
Ссылки: Исходный код / Демо
Создано: 9 февраля 2017 г.
Сделано с: HTML, SCSS, JS
Метки : jquery, аккордеон, меню, javascript, мобильный
17. Простая аккордеон расширения области содержимого
Простой аккордеон CSS и JQuery, который расширяет область содержимого с заданной начальной высоты до конечной высоты. Конечная высота определяется автоматически на основе высоты скрытого содержимого. На одной странице можно использовать несколько экземпляров без изменения кода.
Автор: Джеймс Маретт (OastOne)
Ссылки: Исходный код / Демо
Дата создания: 11 августа 2020 г.
Сделано с: HTML, CSS, JS
Теги: расширение, переход, чтение, аккордеон, простой
18. Простой JQuery Accordion Caret
У этого аккордеона есть значок вставки, и он меняется, когда аккордеон активен.
Автор: Елена (haitch)
Ссылки: Исходный код / Демо
Дата создания: 5 февраля 2020 г.
Сделано с помощью: Pug, SCSS, JS
CSS Препроцессор: SCSS
Препроцессор JS : Нет
Препроцессор HTML: Мопс
Теги: выпадающий список, аккордеон, каре
19. Простая гармошка
Автор: Rus WebNov (русланвыбор)
Ссылки: Исходный код / демо
Создано: 5 августа 2020 г.
Сделано с: HTML, CSS, JS
Теги: аккордеон, jquery, css, html 900 07
20.
Очень простой фрагмент JQuery AccordionАвтор: Qusay Saad (qusaysaad)
Ссылки: Исходный код / Демо
Дата создания: 2 октября 2016 г.
Сделано с помощью: HTML, CSS, JS
21. Вертикальная гармошка (HTML5 + JQuery)
Я создал вертикальный аккордеон с помощью jQuery. Идея заключалась в том, чтобы один статический столбец был для меню или заголовка, а остальные были интерактивными. Следующее обновление: Сделать так, чтобы содержимое отображалось/скрывалось при открытии и закрытии Адаптивная версия Bootstrap/SASS
Автор: Мария Падилья (mariapadilla)
Ссылки: Исходный код / Демо
Создано: 9 0006 29 октября 2014 г.
Сделано с помощью: HTML, CSS, JS
Теги: jquery, html5, вертикальный аккордеон, аккордеон
22.
Вертикальное аккордеонное меню с использованием JQuery и CSS3Изящное вертикальное аккордеонное меню для вашего следующего веб-сайта/приложения. В заголовках используется иконочный шрифт Font Awesome. Градиенты, переходы и тени CSS3 использовались в демонстрации вместе с минималистичным использованием jQuery для скольжения списков ссылок. Изящно деградирует до IE8. Работает со всеми основными бровями…
Подробнее
Автор: Arkev (arkev)
Ссылки: Исходный код / Демо
Создано: 12 апреля 2013 г.
Сделано с: HTML, CSS, JS
9 0004 Теги: меню, jquery, css323. Плавная гармошка к вертикальным табуляциям
Переход от аккордеона к вертикальным табуляциям. Аккордеон имеет интерактивные h3 с функцией прокрутки, когда < 480 пикселей. При >481px вертикальные вкладки используются для переключения, и отображается только активная панель.
Работа в процессе… Несколько проблем со специальными возможностями, которые необходимо исправить: -альтернатива дис…
Подробнее
Работа в процессе… Несколько проблем со специальными возможностями, которые необходимо исправить: -альтернатива дис…Автор: Джейкоб Роттон (jrotton)
Ссылки: Исходный код / Демо
Создано: 13 декабря 2011 г. 2
Сделано с помощью: HTML, CSS, JS
Теги: аккордеон, табы
24. Css, JQuery Вертикальный полноэкранный аккордеон
Автор: kaleem (mahesarkaleem)
Ссылки: Исходный код / Демо
Дата создания: 1 сентября 2018 г.
Сделано с помощью: HTML, SCSS, JS
25. Horizontal Image Accordion JQuery
Автор: Ragnarok (Рагнарок)
Ссылки: Исходный код / Демо
Created on : 19 января 2017 г.
Сделано с помощью: Pug, Sass, JS
Препроцессор CSS: Sass
Препроцессор JS: Нет 9000 7
Препроцессор HTML: Мопс
26.
Слайдер-аккордеонСлайдер-аккордеон с GSAP и jQuery
Автор: Garrett (gnevin)
Ссылки: Исходный код / Демо
Дата создания: 15 января 2017 г.
Сделано с помощью: HTML, CSS, JS
Теги: слайдер, gsap, greensock, tweenmax, аккордеон
Примеры jQuery Accordion
1. Простой скользящий аккордеон
Автор: rajeshdn (cool_lazyboy)
Ссылки: Исходный код / Демо
Создано: 9 сентября 2019 г.
Сделано с помощью: HTML, CSS, JS
2. Ползунок-аккордеон
Автор: Yusuke Saio (saio-th)
Ссылки: Исходный код / Демо
Создано: 12 сентября 2019 г.
Сделано с: HTML, SCSS, J S
3. Аккордеоны для изображений
Демо-аккордеоны изображений с Swiper.
jsАвтор: januaryofmine (januaryofmine)
Ссылки: Исходный код / Демо
90 005 Дата создания: 24 марта 2019 г.
Сделано с помощью: HTML , SCSS, JS
Теги: аккордеонов изображений, swiper.js, анимация, событие прокрутки, flex
4. Аккордеон с кнопкой закрытия
Это простой пример того, как вы можете создать аккордеон из обычного HTML тег и пару строк jquery. Мы часто прибегаем к использованию сложных паттернов и написанию длинного кода при создании слайдеров и аккордеонов, совершенно забывая, что есть очень простые способы решения этих проблем…
Подробнее
Автор: Андрей Шарапов (andrejsharapov)
Ссылки: Исходный код / Демо
Создано: 17 марта , 2019
Сделано с: Мопс, Сасс, JS
Препроцессор CSS: Sass
Препроцессор JS: Нет
Препроцессор HTML: Pug
5.
Аккордеон с тегами Dt и DdАккордеон с использованием списков определений. Популярные слова взяты с сайта Dictionary.com.
Автор: Халида Астатин (halidaa)
Ссылки: Исходный код / Демо
Дата создания: 4 июня 2018 г.
Сделано с: HTML, CSS, JS
Теги: cpc-dt-dd, codepenchallenge, аккордеон, faq, dribbble
6. App Meteo Animation Css Ease
Автор: Sergio (SofiaSergio)
Ссылки: Исходный код / Демо
Дата создания: 7 марта 2018 г.
Сделано с помощью: HTML, CSS, JS
Теги: анимация, приложение, макет, css, наведение мыши
7. Вертикальное меню-аккордеон, только CSS
90 005 Автор: Эриксен (eriksenlezama )
Ссылки: Исходный код / демо
Создано: 30 января 2018 г.
Сделано с: HTML, CSS
jQuery Accordion Plugins 9 0603
1. Араи Аккордеон
HTML, CSS и JS аккордеон UI-компонент для масштабируемых проектов.
Ссылки: Исходный код / Демо
Дата создания: 17 апреля 2017 г. 0007
Ссылки: Исходный код / Демо
Created on : 1 марта 2017 г.
3. Simple JQuery Multi Accordion
Simple JQuery Multi Accordion
Ссылки: Исходный код / Демо
Дата создания: 20 апреля 2017 г.
Ссылки: Исходный код / Демо
Дата создания: 23 апреля 2015 г.
5. Аккордеон JQuery
👆 Отзывчивый, работающий на CSS, плагин аккордеона jQuery.
Ссылки: Исходный код / демонстрация
Создан: 22 июня 2014 г.
jquery accordion widget — wp hive
Версия: 3.1.2
Создает меню вертикального аккордеона из любого пользовательского меню WordPress с использованием jQuery. Добавляйте меню с помощью виджетов или шорткодов.
Общий рейтинг
Рейтинг WordPress
Хотите написать отзыв?
Вы автор этого плагина? Хотите написать более подробный отзыв?
Отправить отзыв
Проблемы с плагином
Извините, приятель! Плагин не смог пройти все наши тесты. Никаких обид, верно?
Тесты, выполненные тестовым скриптом WP Hive Результаты
Минимальное влияние на использование памяти Использование памяти этим плагином меньше, чем среднее использование памяти другими плагинами на WordPress.org + 200 КБ. Проверьте часто задаваемые вопросы для получения дополнительной информации.
Минимальное влияние на скорость страницы Влияние этого плагина на PageSpeed меньше, чем среднее влияние других плагинов на WordPress.
org + 1000 миллисекундНет ошибок PHP, предупреждений, уведомлений Автоматический тест WP Hive не обнаружил ошибок PHP при активации этого плагина на нашем сервере
.Нет проблем с Javascript Автоматический тест WP Hive не обнаружил ошибки JavaScrip при активации этого плагина на нашем сервере
Последняя версия PHP 7.2.16, совместимая Автоматический тест WP Hive обнаружил, что плагин полностью совместим с последней версией PHP
.Последняя версия WordPress 5.3, совместимая Автоматический тест WP Hive обнаружил, что плагин полностью совместим с последней версией WordPress
.Оптимизированный размер базы данных Плагин создает менее 50 таблиц базы данных
Нет ошибок активации Автоматический тест WP Hive не обнаружил ошибки активации при активации этого плагина на нашем сервере
.Нет ошибок ресурсов Автоматический тест WP Hive не обнаружил ошибок ресурсов при проверке этого плагина на нашем сервере
Часто обновляется Плагин не обновлялся хотя бы раз за последние 90 дней
org + 1000 миллисекундСкачать плагин Сайт плагина
О JQuery Accordion Menu Widget
Производительность
Скорость страницы
- Среднее время загрузки страницы увеличилось на 0 с
- Это быстрее, чем 99% плагинов
Эталон теста скорости Узнайте больше о том, как мы собираем данные
- Перед активацией плагина
- После активации плагина
Страниц
Контрольный показатель
Изменение
Среднее изменение
— 0 с
/(главная страница)
— 0 с
/wp-admin/edit-comments.
php
+ 0,12 с 90 007
/wp-admin/edit-теги. php?taxonomy=category
— 0,05 с
/wp-admin/edit.php
+ 0,07 с
/wp-admin/index.php
— 0,06 с
/wp-admin/media-new.php
+ 0,03 с
/wp-admin/options-discussion.php
+ 0,04 с
/wp-admin/options-writing.php
9000 4 — 0,02 s/wp-admin/post-new.php
— 0,13 с
/wp-admin/post-new.php?post_type=page
+ 0,04 с
/wp-admin/upload.php
— 0,08 с
Больше Меньше
Тест использования памяти Узнайте больше о том, как мы собираем данные
- Перед активацией плагина
- После активации плагина
Страниц
Контрольный показатель
Изменение
Среднее изменение
+ 0,03 КБ
/ (главная страница)
— 6,86 КБ
/wp-admin/edit-comments.php
+ 1. 47 КБ
/wp-admin/edit- tags.php?taxonomy=category
+ 1,68 КБ
/wp-admin/edit.
php
+ 1,61 КБ
/wp-admin/index.php
+ 1,61 КБ
/wp-admin/media-new.php
+ 1,57 КБ
/wp-admin/options-discussion.php
+ 1,61 КБ
/wp-admin/options-writing .php
— 10,13 КБ
/wp-admin/post-new.php
+ 3,41 КБ
/wp-admin/post-new.php?post_type=page
+ 2,56 КБ
/вп-админ/ upload.php
+ 1.5KB
Больше Меньше
Пользовательский рейтинг JQuery Accordion Menu Widget от пользователей WP Hive
Оценить сейчас
Статистика
Подробнее
Таблицы базы данных
Плагин добавил 0 дополнительных опций в ваш WordPress.
WP-Options
Плагин добавил 0 дополнительных опций на ваш сайт WordPress.
Ошибки
Подробнее о том, как WP Hive определяет эти данные.
Журнал ошибок
Мы обнаружили следующие ошибки при активации плагина. Узнайте больше о том, как WP Hive генерирует эти данные.
- [13 ноября 2019 г. 18:31:58 UTC] Устаревший PHP: методы с тем же именем, что и их класс, не будут конструкторами в будущей версии PHP; dc_jqaccordion имеет устаревший конструктор в /wp-content/plugins/jquery-vertical-accordion-menu/dcwp_jquery_accordion.php в строке 14
- [13 ноября 2019 18:31:58 UTC] PHP устарел: методы с тем же имя, так как их класс не будет конструктором в будущей версии PHP; dc_jqaccordion_widget имеет устаревший конструктор в /wp-content/plugins/jquery-vertical-accordion-menu/dcwp_jquery_accordion_widget.php в строке 3
- [13 ноября 2019 г. 18:31:58 UTC] PHP устарел: функция create_function() устарела в /wp-content/plugins/jquery-vertical-accordion-menu/dcwp_jquery_accordion.php в строке 60
Покажите свой плагин
PHP 7.2.16
Работает на WP Hive
WP 5.3
Работает на WP Hive
PHP 7.2.16 РП 5.3
Нравится использовать этот плагин?
Почему бы вам не сравнить плагин бок о бок
с другим плагином
Начать сравнение
Рейтинги и обзоры
Общее качество
5
Простота использования
5
Качество поддержки
5
Соотношение цены и качества
5
Характеристики
5
Нравится то, что вы видите?
Подпишитесь, чтобы получать больше качественных обзоров и статей.