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

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

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

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

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

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

Способ 1: jQuery

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

1
2
3
4
5
6
7
8
9
10
11
<div id="accordion-js" class="accordion">
   <h2>Заголовок 1</h2>
   <p>Здесь находится контент...</p>
   <h2>Заголовок 2</h2>
   <p>Здесь находится контент...</h2>
   <h2>Заголовок 3</h2>
   <div>
      <p>Здесь находится контент...</p>
      <p>Здесь находится контент...</p>
   </div>
</div>

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

Стили CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
h2 {
color: #002850; font-size: 30px; font-weight: normal;
padding: 45px 0 15px;cursor:pointer;
}
.accordion {
border: 1px solid #ddd; border-top: none; margin: 10px 0;
float: left; width: 470px; position: relative;
}
.accordion a {
display: block; text-decoration: none;
}
.accordion h2, .accordion a{
background-color: #fff;
background-image: url(gradient.jpg);
background-image: -moz-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -ms-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -o-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -webkit-linear-gradient(bottom, #f1f1f1, #fff);
background-image: linear-gradient(bottom, #f1f1f1, #fff);
border-top: 1px solid #ddd;
color: #222; font: 14px/30px 'Verdana', sans-serif;
height: 30px; margin: 0; padding: 0; text-indent: 10px;
}
p {
color: #555; font: 12px/18px 'Verdana', sans-serif;
padding: 20px 10px;
}

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

jQuery

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

1
2
3
4
5
$(document).ready(function(){
   $('#accordion-js').find('h2').click(function(){
       $(this).next().stop().slideToggle();
   }).next().stop().hide();
});

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

Способ 2: CSS3

Разметка HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="accordion-css3" class="accordion">

   <a href="#accordion-1">Заголовок 1</a>
   <p id="accordion-1">Здесь находится контент...</p>
   <a href="#accordion-2">Заголовок 2</a>
   <p id="accordion-2">Здесь находится контент...</p>
   <a href="#accordion-3">Заголовок 3</a>
   <div id="accordion-3">
      <p>Здесь находится контент...</p>
      <p>Здесь находится контент...</p>
   </div>

</div>

По сравнению с предыдущим способом есть 3 изменения:

  • вместо h2 теперь ссылка a;
  • скрытое содержимое получило идентификатор;
  • якоря ссылок с добавлением хэш тега #, соответствуют идентификаторам следующего за ними контента.

CSS

1
2
a[href^="#accordion"] + *{display: none;}
#accordion-css3 :target{display: block;}

Работает это следующим образом:
При помощи CSS селектора a[href^=»#accordion»]+* выбираем и скрываем элемент, который идет после ссылки, атрибут href начинающийся на #accordion.

Что касается псевдокласса :target. Он используется для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, Вы наживаете на Заголовок 1, в адресную строку передается значение атрибута href и она принимает вид index.html#accordion-1, происходит переход к элементу, атрибут id которого задан как accordion-1. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Способ 3: HTML5

Разметка HTML

Я думаю, что это самый простой способ сделать аккордеон, и самый перспективный так сказать. Потому как работает только в WebKit браузерах. Думаю не стоит так просто сбрасывать со счетов HTML5, это лишь вопрос времени, ведь рано или поздно все браузеры будут на 100% поддерживать его.

1
2
3
4
5
6
7
8
   <details>
   <summary><h2>Заголовок 1</h2></summary>
     <p>Здесь находится контент...</p>
   </details>
   <details>
     <summary><h2>Заголовок 2</h2></summary>
     <p>Здесь находится контент...</p>
   </details>

Тег details используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое тега не отображается. А тег summary указывает заголовок для тега details, по которому можно щелкать для разворачивания/сворачивания информации. Тег summary должен идти первым внутри details.

По умолчанию браузер добавляет стрелку рядом с summary. Избавляемся от этого так:

1
details summary::-webkit-details-marker{display: none;}

P.S.: Если вы так же как и я любите веб-разработку и дизайн, и хотите постоянно совершенствоваться, то вам обязательно следует заглянуть на http://webformyself.com/minikurs/webdesign/free.html и подписаться. Уверен, что узнаете много нового, интересного и вдохновляющего. Такие знания вдвойне приятнее получать от профессионалов WebForMySelf.com.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!