BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

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

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

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

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

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

<script ENGINE="text/javascript" src="https://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;}

 

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

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573