Аккордеон для сайта на CSS3

CSS3 10.04.2013

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

ДЕМО

ИСХОДНИКИ

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

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

Для правильного отображения в различных версиях IE мы будем использовать следующий прием:

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

Дальше нам необходимо создать сам аккордеон, а именно разметку, для этого мы будем использовать следующие классы:

<div>
        <section id="one">
                <h2><a href="#one">Заголовок</a></h2>
                <div>
                        <p>Описание</p>
                </div>
        </section>
</div>

Секция accordion будет содержать всё содержимое аккордеона, секции можно редактировать под свое усмотрение..

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

Вот и все, вы можете изменить цвет и другие варианты, добавить новые подпункты на свой вкус.