Главная » Эффекты для сайта » Три способа, как сделать вертикальный аккордеон для сайта с помощью CSS3, jQuery, HTML5

Три способа, как сделать вертикальный аккордеон для сайта с помощью CSS3, jQuery, HTML5

2015-05-25 / Вр:00:03 / просмотров: 18029

Эффект назван «аккордеоном» потому, что принцип его работы похож на работу музыкального инструмента аккордеона.

Для того чтобы добыть звук, играющий растягивает и стягивает мехи аккордеона. А на сайте это выглядит так: например, есть несколько вкладок со скрытым текстом – значит, мехи «аккордеона» сжаты; а при нажатии на вкладку, текст открывается – мехи растянулись.

Где можно использовать эффект «Аккордеон» на сайте:
- для меню;
- для страницы FAQ (ответы на часто задаваемые вопросы);
- для формы с комментариями;
- для вывода на странице полезных или последних материалов;
- и прочее

Разобрались!
Теперь пришло время рассказать о трех способах, с помощью которых можно создать эффект «Аккордеон» на сайте:

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

Способ №1 (с помощью jQuery)

Подключаем библиотеку jQuery, если не знаете, как это делать, читайте здесь:

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

Теперь сам скрипт:

<script type="text/javascript">
$(document).ready(function(){
	$('#accordion-js').find('h2').click(function(){
	    $(this).next().stop().slideToggle();
	}).next().stop().hide();

});
</script>

HTML код:

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

CSS:

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;
}

Способ №2 (с помощью CSS3)

HTML код:

<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>

CSS:

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;
}

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

Способ №3 (с помощью HTML5)

HTML код:

<div id="accordion-html5" class="accordion">
	<details>
	<summary><h2>Заголовок 1</h2></summary>
	  <p>Здесь находится контент...</p>
	</details>
	<details>
	  <summary><h2>Заголовок 2</h2></summary>
	  <p>Здесь находится контент...</p>
	  </details>
	<details>
	  <summary><h2>Заголовок 3</h2></summary>
	  <p>Здесь находится контент...</p>
	</details>
</div>

CSS:

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;
}

#accordion-html5{clear: both; margin-top: 20px;}
details summary::-webkit-details-marker{display: none;}

Вы можете посмотреть демонстрацию эффекта «Аккордеон» либо скачать готовый код:

[посмотреть пример] или [скачать файл]