С приходом CSS3 мы получили возможность создавать анимированные аккордеоны без jQuery/javascript
Чаще всего аккордеоны на CSS используют псевдо класс :target, но у него есть недостатки, которые делают его применение нежелательным: невозможность закрытия контента после раскрытия и одновременное открытие нескольких скрытых элементов аккордеона. Чекбоксы (<input type="checkbox">
) лишены этих недостатков. Если же вам нужно чтобы одновременно был открыт только один пункт аккордеона, то используйте <input type="radio">
.
HTML код аккордеона
В нашем примере CSS3-аккордеона используются чекбоксы и одна секция с контентом открыта по умолчанию (с помощью атрибута checked). Все это будет помещено в контейнер с классом ac-container. Для каждого пункта, помимо чекбокса, у нас будут использоваться теги label для заголовка пункта аккордеона и article с контентом в качестве содержимого.
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox"/>
<label for="ac-1">О нас</label>
<article class="ac-small">
<p>Контент...</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox"/>
<label for="ac-2">Услуги</label>
<article class="ac-medium">
<p>Контент...</p>
</article>
</div>
<div>
<!-- ... -->
</div>
</section>
Мы должны задать ID каждому тегу input. Он потребуется нам для атрибута ярлыка (тег label), чтобы выделить чекбокс при клике по ярлыку. Каждый тег article будет иметь класс, помогающий нам определить на сколько нам нужно развернуть элемент (мы не можем использовать значение auto
в качестве значения высоты расширенного элемента потому, что в этом случае мы не сможем получить нужную анимацию).
CSS стили для аккордеона
Мы не будем здесь прописывать браузерные префиксы в целях минимизации кода, но в примере и в архиве с кодом они присутствуют. Зададим ширину нашего аккордеона и отцентрируем его:
.ac-container{
width: 400px;
margin: 10px auto 30px;
}
После этого сделаем так, чтобы наши ярлыки отображались в виде кнопок. С помощью CSS-свойства box-shadow мы придадим ярлыкам объем и эффект надавливания. Также мы установим свойство z-index равным 20
, чтобы ярлыки были выше других элементов аккордеона:
.ac-container label {
font-family: Arial;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: linear-gradient(top, #ffffff 1%, #eaeaea 100%);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
При наведении ярлык будет становиться белым:
.ac-container label:hover{
background: #fff;
}
При нажатии на ярлык, чекбокс будет выделяться. И при этом нам нужно, чтобы соответствующий ярлык выглядел как выделенный:
.ac-container input:checked + label,
.ac-container input:checked + label:hover {
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
Как видите, мы используем соседний селектор для выделения ярлыка, поскольку он идет сразу же за чекбоксом. Добавим небольшую стрелочку при наведении, для чего используем псевдо-класс after, чтобы не писать лишний код:
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent url(/arrow_down.png) no-repeat 50% 50%;
}
Нам нужно, чтобы рядом с активным пунктом аккордеона появилась смотрящая вверх стрелочка:
.ac-container input:checked + label:hover:after{
background-image: url(/arrow_up.png);
}
Поскольку нам не нужно отображать чекбоксы, мы прячем их:
.ac-container input{
display: none;
}
Контент в теге article изначально будет иметь нулевую высоту, поэтому его содержимое будет скрыто. Также мы добавим к этому тегу свойства transition и box-shadow. Переход transition будет действовать вплоть до «закрытия» пункта. Обратите внимание, что мы немного ускорили закрытие, поэтому содержимое открывается дольше, чем закрывается.
.ac-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
transition:
height 0.3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
transition:
height 0.5s ease-in-out,
box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
Давайте оформим содержимое контентной части:
.ac-container article p{
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
А сейчас мы определим три класса для трех различных значений высоты. Это те значения, до которых будут растягиваться области контента:
.ac-container input:checked ~ article.ac-small{
height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
height: 180px;
}
.ac-container input:checked ~ article.ac-large{
height: 230px;
}
Как уже было сказано, значение высоты «auto» здесь подойдет лучше всего, но так как мы не можем получить нужную нам анимацию, нам нужно заранее подготовить несколько значений высоты для переходов. Пожалуйста, учтите, что в некоторых мобильных браузерах клик по ярлыку может не задействовать процесс выделения определенного элемента ввода.