Аккордеон 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.

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

Создаём 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

Думаю не раз Вы встречали подобный эффект на сайтах, это весьма удобно, ведь позволяет значительно сэкономить место, при этом не отвлекать посетителя различной информацией, которая ему, возможно, вообще не пригодится. В данном уроке мы рассмотрим как создать достаточно простой эффект аккордеона для сайта, который будет по умолчанию собран и скрыт, но при нажатии он будет раздвигаться и нести посетителю целевую информацию. Такие спойлеры будут удобны на сайтах, где много текстовой информации и по умолчанию она должна быть невидимой.

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

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

Шаг 1. HTML

Разметка будет проста, у нас будет общий параметр контейнера, в котором будет содержаться вся наша разметка, для демонстрации мы устанавливаем заголовок нашей аккордеона:

Затем у нас будет класс set который будет обозначать наш один подвид контейнера, в него мы погружаем класс content в котором будет содержаться все описание в аккордеоне.

Шаг 2. CSS

Теперь все это нам необходимо стилизовать, для этого нам понадобиться несколько достаточно простых правил, в которых мы изначально стилизуем контейнер- accordion-container, затем заголовки, которые у нас будут обозначаться h3:

Затем мы стилизуем сам блок, иконки и содержание нашего аккордеона, обратите внимание, что для класса set у нас будет использоваться активное и пассивное состояние, это позволит нам выделять выбранный нами пункт.

Шаг 3. JS

Теперь всю нашу задумку необходимо оживить, для этого мы используем несколько строчек скрипта, с помощью которых мы обеспечим работоспособность активных и пассивных вкладок, а также добавим иконку «плюс» и «минус»:

В результате мы получаем замечательный аккордеон, который легко внедрить на сайт и достаточно просто изменить под свой дизайн сайта.

Вот и все. Готово!

Читайте также:

Аккордеон jquery · GitHub

Аккордеон jquery · GitHub

Instantly share code, notes, and snippets.

Аккордеон jquery

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.

аккордеон » Скрипты для сайтов

31.07.2014 13 586
Скрипты / Accordion

Вертикальное accordion меню

Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.  

30.07.2014 5 038
Скрипты / Accordion

Flat accordion menu — вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

11.04.2012 4 586
Скрипты / Accordion

Akordeon — плагин аккордеона

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

22.03.2012 5 036
Скрипты / Menu & Nav

Меню аккордеон на CSS3

Меню в стиле аккордеона сделанное на CSS3 с использованием изображений к пунктам навигации.

01.03.2012 5 419
Скрипты / Accordion

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

Типичный аккордеон, но реализованный только с помощью CSS3 свойств.

17.02.2012 6 667
Скрипты / Accordion

Спойлер — spoiler

Рассмотрим toggleClass атрибут jquery для создания спойлера или аккордеона.

08.12.2011 3 506
Скрипты / Accordion

Гибкий аккордеон

Создадим простой быстрореагирующий аккордеон, который при раскрытии будет перемещаться к верхней области просмотра. Также будет добавлено несколько переходов CSS3 для стрелки. Гибкость заключается в том, что ширина аккордеона будет подстраиваться под размеры экрана.

08.11.2011 2 629
Скрипты / Slider

Slidorion — слайдер и аккордеон в одном

Данный плагин для jquery совмещает в себе и слайдер изображений и аккордеон из описания к ним.

14.10.2011 4 302
Скрипты / Accordion

Эффект раздвижных шторок

Похоже на аккордеон — при наведении происходит, как бы раздвигание шторок и мы видим полное изображение.

05.08.2011 2 232
Скрипты / Slider

Вертикальный раздвижной аккордеон

В этой уроке речь пойдет о вертикальном аккордеоне с возможностью слайдера реализованного конечно же на jQuery. Кусочек аккордеона раздвигается при клике и показывает дополнительную информацию, например текст, а другие кусочки станут прозрачнее и сожмутся. Переход к следующему слайду производится с помощью стрелочек или же колесиком мышки (плагин jQuery Mousewheel от Brandon Aaron).

13.05.2011 3 164
Скрипты / Accordion

Плагин zAccordion — слайдер

Простой плагин zAccordion — слайдер изображений. Замечательно впишется в любой дизайн сайта.

Как сделать элегантный аккордеон с JQUERY и CSS3

Сегодня мы будем создавать элегантный аккордеон для контента. Идея состоит в том, чтобы несколько вертикальных вкладок с контентом раздвигались в стороны при наведении на одну из них курсором мыши. Для улучшения внешнего вида аккордеона будут использованы некоторые свойства CSS3. Давайте приступим!

Вы можете нажать на ссылку под изображением для просмотра демо или же для скачивания исходных документов.

                                    Демо             Загрузить материалы

Начнем в первую очередь с разметки.

РАЗМЕТКА

HTML будет состоять из списка, где каждая вкладка аккордеона — это элемент списка. Внутри элемента списка будет заголовок, который исчезает при наведении. Кроме того будет элемент для фона с белым градиентом и блок для описания.

<ul>
    <li>
        <div>Heading</div>
        <div></div>
        <div>
            <h3>Heading</h3>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
</ul>

Остальные элементы будут иметь классы bg2, bg3 и bg4. Неупорядоченный список получает класс и id, так как мы будет в дальнейшем обращаться к нему в JavaScript.

CSS

Стили для списка будут следующими:

ul.accordion{
    list-style:none;
    position:absolute;
    right:80px;
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}

Все элементы списка будут иметь разное фоновое изображение и поэтому в первую очередь зададим общие свойства стиля для каждого элемента списка:

ul.accordion li{
    float:right;
    width:115px;
    height:480px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
    background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
    background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
    background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
    background-image:url(../images/4.jpg);
}

Отметим, что box shadow не будет работать в IE.

Начальная ширина каждого пункта будет 115 пикселей. В JavaScript это значение будет изменено при наведении до 480px.

Граница вокруг элемента должна быть применена только для одной стороны элемента, в противном случае у нас бы получалась двойная рамка между пунктами и одинарная рамка на внешних границах. Нужно определить класс для левой границы, который будем применять для последнего элемента списка (так как элементы плавают справа, поэтому применять стили будем в обратном порядке):

ul.accordion li.bleft{
    border-left:2px solid #fff;
}

Теперь необходимо придать хороший вид заголовку с белым полупрозрачным фоном для каждого элемента списка при «замкнутом» состоянии аккордеона:

ul.accordion li .heading{
    background-color:#fff;
    padding:10px;
    margin-top:60px;
    opacity:0.9;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:14px;
    color:#444;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
}

Блок, который содержит описание, будет выглядеть следующем образом:

ul.accordion li .description{
    position:absolute;
    width:480px;
    height:175px;
    bottom:0px;
    left:0px;
    display:none;
}

Сначала установим display:none, так как мы хотим, чтоб элемент появлялся только при наведении. Вот стили других элементов:

ul.accordion li .description h3{
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:45px;
    color:#444;
    text-align:left;
    margin:0px 0px 15px 20px;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
    line-height:14px;
    margin:10px 22px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em;
}
ul.accordion li .description a{
    position:absolute;
    bottom:5px;
    left:20px;
    text-transform:uppercase;
    font-style:normal;
    font-size:11px;
    text-decoration:none;
    color:#888;
}
ul.accordion li .description a:hover{
    color:#333;
    text-decoration:underline;
}

Стиль для градиента:

ul.accordion li .bgDescription{
    background:transparent url(../images/bgDescription.png) repeat-x top left;
    height:340px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:none;
} 

JAVASCRIPT

Во-первых, мы включаем библиотеку jQuery перед закрытием тега body:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Теперь добавим функцию, которая заставляет список раздвинуться при наведении на него мыши. Это может быть достигнуто путем увеличение ширины в 480 пикселей. При этом верхний заголовок должен исчезать и его место занимает градиент (CSS класс «bgDescription») с описанием:

<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>

Первая функция внутри «$(‘#accordion > li’).hover» срабатывает при наведении на нее курсора. Вторая функция — когда курсор отводится в сторону. Добавим некоторые временные задержки, чтобы перевод осуществлялся плавно.

Это все! Надеемся, что урок был интересным и полезным! 

Автор — MARY LOU.

Перевод — Дежурка.

Читайте также:

Создаем аккордеон для сайта | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! В этой статье разберем 3 способа создания аккордеона для сайта:

• с помощью jQuery;
• с помощью CSS3;
• с помощью HTML5.

Если Вы еще не сталкивались с таким элементом на сайте, то это обязательно произойдет рано или поздно. На самом деле очень простая концепция, которая требует небольшого скрипта для функционирования. Аккордеоны, как правило, используется для организации дополнительной информации. Вы можете использовать аккордеон как:

• меню с выпадающими подпунктами;
• ответы на вопросы (FAQ страницу).

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

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

Способ 1: jQuery

Базовая разметка HTML и CSS стили

Заголовок h3 будет «кнопкой» для аккордеона. Элемент, на который будет происходит нажатие, и открываться скрытый контент. Вместо h3 может быть любой другой элемент, то есть это может быть параграф p, ссылка, контейнер div или изображение. Я считаю, что это наиболее эффективный способ создания этого типа аккордеона.

Стили CSS

С помощью этих правил создаем общие для всех способов, основные стили «кнопки» аккордеона. В качестве фона используется CSS3 градиент, само собой в старых браузерах работать не будет, поэтому имеет смысл подстраховаться фоновым изображением.

jQuery

Самый важный момент — jQuery:

Благодаря селектору находим по id контейнер accordion-js, а в нем элемент h3. Отслеживаем клик по этому элементу и методом .next() выбираем следующий элемент после h3, в нашем случае параграф p, и открываем или скрываем его после второго щелчка.

Способ 2: CSS3

Разметка HTML

  bower install jq-accordion - сохранить
// или
npm установить jq-accordion --save
  

 
 $ ('.аккордеон '). аккордеон ({
 
 "transitionSpeed": 400 
 
}); 
 

 
 
 
 
 
 Control 
 
 
 
 
 
 
 Row 
 
 
 
 Row 
 
 
 
 Ряд 
 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
 Control 
 
 
 
 
 
 
 Строка 
 
 
 
 Ряд 
 
 
 
 Ряд 
 
 
 
 
 
 
 
 
 
 
 
 
 Control 
 
 
 
 
 
 
 Row 
 
 
 
 Row 
 
 
 
 Row 
 
 
 
 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
 Control 
 
 
 
 
 
 
 Ряд 
 
 
 
 Ряд 
 
 
 
 Ряд 
 
 
 
 
 
 
 
 
 
 
 

  $ npm установить  

  $ ионная подача  

  $ npm установить  

  $ нг подача - открыть