Главная » jQuery » Отзывчивый аккордеон с помощью jQuery

Отзывчивый аккордеон с помощью jQuery

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

Не помню уже, где, когда, кому и зачем написал этот простенький плагин, да и вообще, сам ли писал. Но вот достал из пылившегося архива своих наработок, внёс некоторые поправки с учётом современных реалий веб-дизайна и получился ещё один, довольно таки надёжный инструмент для подачи информации.
 
Отзывчивый аккордеон с помощью jQuery

Для работы «аккордеона» понадобится подключенная библиотека jQuery. Как вы помните, подключить её можно напрямую с серверов Google:
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Отзывчивым, я обозвал не просто так. Вся html-конструкция аккордеона, представляет из себя базовый div-контейнер с вложениями, которому определено максимальное значение ширины max-width: 600px; (опционально) при 100% относительно родительского блока, в котором он будет размещён, что делает аккордеон гибким при размещении в различных частях шаблона, будь то боковая панель или контейнер с основным контентом.
В примере максимально-возможную ширину выставил в 600px, которую вы всегда легко сможете изменить в ту или иную сторону, с учётом ваших потребностей.
 

<!-- блок аккордеон -->
<div class="accordion">
    <section class="accordion_item">
        <h3 class="title_block">Заголовок Панели №1</h3>
        <div class="info">
            <p class="info_item">Бла-Бла-Бла.</p>
            <p class="info_item">Бла-Бла-Бла..</p>
        </div>
    </section>
    <section class="accordion_item">
        <h3 class="title_block">Заголовок Панели №2</h3>
        <div class="info">
            <p class="info_item">Бла-Бла-Бла..</p>
            <p class="info_item">Бла-Бла-Бла...</p>
        </div>
    </section>
    <section class="accordion_item">
        <h3 class="title_block">Заголовок Панели №3</h3>
        <div class="info">
            <p class="info_item">Бла-Бла-Бла..</p>
            <p class="info_item">Бла-Бла-Бла...</p>
        </div>
    </section>
</div>
<!-- конец блока аккордеон -->

CSS

Как писал выше, базовый блок аккордеона сделал, что называется «резиновым». Цветовую палитру, для оформления панелей, подобрал из состава материального дизайна от google, тренд нынче такой, понимаешь ли))). В данном примере, панели заголовков выполнены с зелёным оттенком, вы можете выбрать любой другой из состава палитры: Тынц »
В остальном всё без особых изысков и ненужных ляповатостей.
Для параграфов <p> внутри блоков аккордеона добавил нижний отступ, что конечно же не обязательно, дело вкуса, можете использовать по стандарту.

Переключатели панелей сформировал с помощью псевдоэлемента :before, выполнил в виде стрелок, сменяющих направление при активации панелей.
Коротенькие комментарии прямо в коде css, помогут вам разобраться какой селектор за что отвечает и понять в общем, что куда и зачем.
 

/* стили блока аккордеон */
.accordion {
  width:100%;
  max-width: 600px; 
  margin: 0 auto
}
/* секции аккордеона */
.accordion .accordion_item {
  margin-bottom:1px;
  position:relative
}
/* заголовки панелей аккордеона */
.accordion .title_block {
  font-weight: 400;
  font-size: 18px;
  color: #eee;
  cursor:pointer;
  background: #009688;
  padding:10px 55px 10px 15px;
  -webkit-transition:all .2s linear 0;
  -webkit-transition-delay:.2s 0;
  transition:all .2s linear 0
}
/* переключатель панелей, положение вниз */
.accordion .title_block:before {
  content:'';
  height:8px;
  width:8px;
  display:block;
  border:2px solid #fefefe;
  border-right-width:0;
  border-top-width:0;
  -ms-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
  position:absolute;
  right:20px;
  top:18px
}
/* активный переключатель, положение вверх */
.accordion .active_block .title_block:before {
  border:2px solid #fefefe;
  border-left-width:0;
  border-bottom-width:0;
  top:18px
}
.accordion .title_block:hover {
  background: #26A69A  
}
 
/* заголовок активного блока  */
.accordion .active_block .title_block {
  background: #26A69A;
  color:#fefefe
}
/* блоки с содержанием */
.accordion .info {
  display:none;
  padding:10px 15px;
  overflow: hidden;
  background:#f7f7f7
}
/* параграф внутри блоков с содержанием */
.accordion .info_item {
  margin-bottom:10px
}
/* картинки внутри аккордеона */
.accordion .info img {
    height: auto;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* полноразмерная картинка */
.large-img {
    width: 100%;
    margin-bottom: 10px;
}
/* миниатюра слева */
.img-left {
    width: 25%;
    float:left;
    margin:5px 15px 5px 0;
}
/* миниатюра справа */
.img-right {
    width: 25%;
    float:right;
    margin:5px 0 5px 15px;
}

Для расширения базового функционала «аккордеона» по умолчанию, прописал отдельные стили для изображений. Картинки в секциях, вы можете отправить, как влево, так и вправо, для этого достаточно добавить тегу img соответствующий класс class="img-left" или class="img-right". В результате получите встроенные в текст миниатюры. Позиционирование изображений определяется через float: right и float: left соответственно.
Для полноразмерных изображений выставил 100% ширину, с отступом от нижнего края в 10px.
Значения ширины в %, обеспечивает возможность пропорционального изменения картинок, при изменении размеров базового контейнера «аккордеона». Конечно же, никто и ничто не мешает вам использовать фиксированные размеры изображений:)

jQuery

С внешним видом нашего «аккордеона» и фаршем html/css кода мы разобрались. Остаётся только всё это дело завести, т.е. сделать так, чтобы панели раскрывались и схлопывались по клику, а поможет нам в этот раз, небольшая магия jQuery. Как в этом деле обойтись исключительно средствами CSS3, можно узнать из моих предыдущих уроков: так или же вот так

И так, основную библиотеку jQuery подключить вы надеюсь не забыли, теперь к документу html подключим небольшой, исполняемый js, через функции которого, и обеспечим надёжную движуху нашего аккордеона:

   <script type="text/javascript">
    ! function(i) {
      var o, n;
      i(".title_block").on("click", function() {
        o = i(this).parents(".accordion_item"), n = o.find(".info"),
          o.hasClass("active_block") ? (o.removeClass("active_block"),
            n.slideUp()) : (o.addClass("active_block"), n.stop(!0, !0).slideDown(),
            o.siblings(".active_block").removeClass("active_block").children(
              ".info").stop(!0, !0).slideUp())
      })
    }(jQuery);
   </script>

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

Покопаться в коде можно здесь

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

14 комментариев
  1. Юрий:

    Хороший вид у аккардеона, вот только беда, не могу разобраться, как доработать скрипт, что б первый был открыт при загрузке страницы. Вижу, что добавляется класс active_block, попробовал его по умолчанию записать в первый селектор, так после этого стрелочка повернулась вверх, а вот самого блока с инфой невидно!) Может подскажите, как добавить такую возможность, спс!

    • Может стоит попробовать просто в html добавить этот класс изначально + к item добавить style="display: block", например вот так:

      jsfiddle.net/2nj31Lyg/

      • Роман:

        если поставить display: block, то при нажатии на другую ссылку, первый не закрывается.

        А нужно сделать так чтобы первый всегда был открыт.Помогите пожалуйста.

        • driver:

          Просто измените class="info" на какой-нибудь другой, или вовсе исключите, display: block у вас уже прописан непосредственно в html, останется выправить содержание в первом блоке, который вы хотите видеть всегда открытым

  2. Роман:

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

    чтобы всегда был открыт я могу сделать)))

  3. Роман:

    Все сделал, оказалось легко и просто, если кому надо, просто допишите в том блоке который хотите оставить открытую, измените на

    и измените на

  4. Роман:

    <section class="accordion_item"> на <section class="accordion_item active_block"> <div class="info"> на <div class="info" style="display: block;">

  5. Александр А.Б:

    Огромное спасибо!!! Аккордеон работает как часики. Я его приспособил в левое меню: по клику на заголовке панели открывается аннотация к разделу. Туда же вставил ссылки простым списком.

    Заодно применил рецепт из этого обсуждения: в текущем info в открываемой страницы дописываю style="display: block;".

    И при клике получается: и страница загружена, и раздел (панель) распахнута.

    Замечательно! Прямо баян! Не — орган Баха! 😉

  6. Подскажите как изменить открытие не в низ а в верх.

    Над заголовком

    • driver:

      Запрос, конечно не совсем привычный, в принципе вся концепция представления контента, построена на скролинге элементов именно вниз, реже по горизонтали, но если оно вам надо, то примерно так: см.пример Достигается сие, тупо сменой позиций в html заголовков и панелей с содержанием, при этом визуально, смещение базы аккордеона будет происходить всё так же вниз)))

  7. Нашел аккордеону множество применений. За это огромное спасибо.

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

    Примечание как использую...

    Акордион находиться в таблице информация от заголовка отделена ячейкой.

    Стиль заголовка изменен немного, текст вертикален.

    В java не разбираюсь помогите.

  8. Замечательный аккордеон! В одном сайте успешно притачал, сейчас тачаю в следующий. Но там сложнее. Андрей, не поможете ли слегка?

    Аккордеон я поставил как sidebar, а выше него пытаюсь притачать очень интересное flexmenu с 352media.github.io/flexMenu/ Эта менюшка по мере заужения экрана сворачивает горизонтальные пункты в кнопку More, по клику/тапу на ней выпадает список спрятанных пунктов. Сорс доходчивый и т.п.

    Но вот какая штука: на малом экране More выкидывает список... под Аккордеон! На широком экране всё ок — список More перекрывает статью. А как экран сдвигается до минимума, нашла коса на камень, т.е. это flexmenu под аккордеон.

    И не знаю что делать! z-index не катит, да ему ещё нужно давать position — как пятое колесо телеге. Что делать?

    • driver:

      Здравствуйте, Александр.

      Попробуйте установить отрицательный z-index:-1; например, для секций с классом .accordion_item

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru