Аккордеон на 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()

JQuery плагин вертикального аккордеон меню для блога WordPress

Здравствуйте, дорогие читатели блога. В этот день расскажу Вам я про превосходный плагин, который создаёт на блоге WordPress классное меню аккордеон — JQuery Accordion Menu Widget. Я сам пользуюсь этим плагинов, и естественно Вы его можете посмотреть в действии справа в рубриках. Очень удобный плагин, просто вставляешь через админку виджет и радуйся.

Плагин

Плагин JQuery Accordion Menu Widget легок в установке и в использовании, к тому же очень функционален. В нем присутствует несколько тем оформления, цветов самого меню, а именно красное, синее, чёрное и  серое. Соответственно это аккордеон меню вольётся практически в любой дизайн блога.

Ещё огромный плюс плагина — это простота установки. Всего лишь нужно его скачать, затем установить, после плагин создаст виджет, который Вам просто нужно будет добавить в сайдбар Вашего блога.

Ну а теперь давайте перейдём к процессу установки и настройки плагина.

Установка плагина

Теперь нужно, в админке блога, зайти во вкладку плагины, затем выбрать Добавить новый и в поле для поиска вписать JQuery Accordion Menu Widget далее нажать поиск.

Нужный нам плагин будет самый первый в списке. А под ним будет ссылка Установить плагин. После того как он установится нужный нам виджет появится во вкладке Внешний вид — Виджеты.

На рисунке выше я подчеркнул название самого виджета.

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

Настройки плагина

После того как виджет будет добавлен в сайдбар его можно будет настроить по Вашему вкусу. А именно выбрать цвет самого меню, тему оформления. Как будет открываться меню при наведении на него или при клике. Углубляться сильно в настройки не буду, они лёгкие и понятные.

Важный момент: рубрики и подрубрики.

Если на Вашем блоге есть подрубрики к рубрикам, Вам нужно создать произвольное меню. Это нужно для того, чтобы плагин меню корректно их отображал и вообще работал.

Чтобы создать произвольное меню в WordPress Вам нужно зайти в Внешний вид, а затем в Меню. Далее нужно придумать название меню, выберите какое Вам понравится:-) после нажимаем на кнопочку Создать меню.

Когда меню будет создано нужно будет выбрать его элементы, в нашем случае это будут рубрики. Ниже будет не большое окошко с рубриками, в этом окошке нужно будет выбрать вкладку Все, затем нажать Выделить все, а после нажать Добавить в меню. Теперь давайте посмотрим что у меня получилось с рубриками на beloweb.ru.

Теперь нужно создать подрубрики. В данном случае у рубрики WordPress будет подрубрика Плагины. Для этого Плагины нужно перетащить чуть правее. Смотрите на рисунке ниже, что у меня получилось.

После того ка Вы сделаете этот шаг, плагин JQuery Accordion Menu Widget будет работать.

Надеюсь, что всё ясно и доступно объяснил. Если Вам всё таки Вам будет что то не понятно спрашивайте в комментариях. До скорых встреч, друзья.

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

Ответ: да

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

О коде

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

com/DavideTriso/aria-accordion»> 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

Аккордеон jQuery

Отсутствует адаптивный подключаемый модуль аккордеона на основе CSS (запасной вариант jQuery).

Форк на Github Пожертвовать через Paypal

Гармошка

(одинарная открытая) Элемент ItemHoodie тоска по эстетике Годара, художественная вечеринка независимо от трастового фонда медленных углеводов, коги, татуированные кофейные банджо одного происхождения. Бранч с глубокими v-образными сумками, ремесленный ликеро-водочный завод Chillwave Williamsburg. Усатый блог путников Карлеса, фуражного биодизельного мясника, стрит-арта. Hashtag небольшие партии биттеров без глютена. Блог мясника о семиотике, палео-асимметричный мопс с краем нарвала. Вилы Мастер-сделай сам Уэс Андерсон посадил на него птицу, пьющую уксус, что угодно. Artisan McSweeney’s Shoreditch, wolf yr Marfa, уличное искусство, locavore, крафтовое пиво, эстетика 90 облагородить. Yr hella fingerstache, Echo Park VHS +1 церковный ключ XOXO Vice Selvage Gastropub Readymade буквально wayfarers.ItemItemItemItem ПредметПредмет ПредметЭлементЭлементЭлементЭлементЭлемент ПредметЭлементЭлементЭлементЭлементЭлемент ПредметПредметПредмет ПредметЭлементЭлементЭлементЭлементЭлемент

Аккордеонная группа

(несколько открытых) Элемент ItemHoodie тоска по эстетике Годара, художественная вечеринка независимо от трастового фонда медленных углеводов, коги, татуированные кофейные банджо одного происхождения. Бранч с глубокими v-образными сумками, ремесленный ликеро-водочный завод Chillwave Williamsburg. Усатый блог путников Карлеса, фуражного биодизельного мясника, стрит-арта. Hashtag небольшие партии биттеров без глютена. Блог мясника о семиотике, палео-асимметричный мопс с краем нарвала. Вилы Мастер-сделай сам Уэс Андерсон посадил на него птицу, пьющую уксус, что угодно. Artisan McSweeney’s Shoreditch, wolf yr Marfa, уличное искусство, locavore, крафтовое пиво, эстетика 90 облагородить. Yr hella fingerstache, Echo Park VHS +1 церковный ключ XOXO Vice Selvage Gastropub Readymade буквально wayfarers.ItemItemItemItem ПредметПредмет ПредметЭлементЭлементЭлементЭлементЭлемент ПредметЭлементЭлементЭлементЭлементЭлемент ПредметПредметПредмет ПредметЭлементЭлементЭлементЭлементЭлемент

Single Accordion

(easeInOutQuad, продолжительность 600 мс) ПредметЭлементЭлементЭлементЭлементЭлемент

Опции

Переменная	По умолчанию	Тип	Описание
скорость перехода	300	между	Скорость перехода в миллисекундах. Оставить комментарий Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт .