CSS3 аккордеон

Что такое аккордеон

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

HTML5

Будем использовать новый HTML5 элемент section При использовании новых элементов HTML5, как этот, для старых браузеров, вам необходимо использовать следующий трюк:

<script>document.createElement('section');</script>

Для простоты здесь я просто использовал де-факто скрипт для включения HTML5 элементов в Internet Explorer, так называемый html5shiv.

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Разметки

Давайте посмотрим, как это работает:

<div class="accordion">
<section id="one">
<h2><a href="#one">Heading 1</a></h2>
<div>
<p>content</p>
</div>
</section>
</div>

• Каждая секция содержит название и конечно, его содержание.

CSS

section {
display: block;
} 
 
.accordion {
background-color: #eee;
border: 1px solid #ccc;
width: 600px;
padding: 10px;
margin: 50px auto;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 #999;
-webkit-box-shadow: 0 1px 0 #999;
box-shadow: 0 1px 0 #999;
}
 
.accordion section {
border-bottom: 1px solid #ccc;
margin: 5px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image:  linear-gradient(top, #fff, #eee);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
 
.accordion h2,
.accordion p {
margin: 0;
}
 
.accordion p {
padding: 10px;
}
 
.accordion h2 a {
display: block;
position: relative;
font: 14px/1 'Trebuchet MS', 'Lucida Sans';
padding: 10px;
color: #333;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
 
.accordion h2 a:hover {
background: #fff;
}
 
.accordion h2 + div {
height: 0;
overflow: hidden;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
 
.accordion :target h2 a:after {
content: '';
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
 
.accordion :target h2 + div {
height: 100px;

Поддержка браузеров

Если вы хотите использовать это для ваших проектов, вы должны знать, что старые версии браузеров не поддерживают класс :target.