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

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

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

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

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

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

HTML

Отзывчивым, я обозвал не просто так. Вся 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, можно узнать из моих предыдущих уроков: так или же вот так

И так, основную библиотеку javascript 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 !

27 комментариев
  1. Александр:

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

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

    Ответить
    • driver:

      Здравствуйте.

      Я так понял аккордеон вам в принципе и не нужен, используйте просто спойлер: см.пример. Соответственно, все элементы стилизуете по-своему.

      Ответить
      • Александр:

        Огромное спасибо! Это то, что нужно) Никаких библиотек подключать не нужно для этого?

        Ответить
      • Александр:

        У я сделал 5 блоков с данным скриптом. но когда открываешь один, то открываются все и также скрываются. Как сделать чтобы работало по-одному?

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

Отправляя к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