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

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

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

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

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

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