
Типичный аккордеон, но реализованный только с помощью CSS3 свойств.
Есть разные варианты аккордеона построенного только на CSS, но все они используют, как правило, псевдо класс :target, у которого есть недостатки, такие как невозможность закрытия контента после раскрытия и одновременного открытия нескольких скрытых элементов.
А вот с помощью скрытых чекбоксов (флажков) мы можем управлять открытием и закрытием. А для того, чтобы одновременно был открыт только один пункт аккордеона используются radio кнопки.
Разметка HTML
Рассмотрим на примере, в котором используются чекбоксы (флажки) и где одна секция с контентом открыта по умолчанию (input должен быть «checked» (отмечен).
Всё будет помещено в контейнер с классом ac-container. Для каждого пункта у нас будет checkbox, 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" checked/> <label for="ac-2">Услуги</label> <article class="ac-medium"> <p>Контент...</p> </article> </div> <div> <!-- ... --> </div> </section> |
Заметьте, что каждому input мы должны назначить свой ID, который будем использовать в атрибуте label. Это необходимо для проверки чекбокса, кликая по label.
У каждого article будет класс, который поможет нам определить высоту, на которую раскроется пункт аккордеона. (Оптимально, это конечно использовать значение auto для высоты, но тогда у нас не будет анимации при открытии).
CSS
Определяем стили:
.ac-container{ width: 400px; margin: 10px auto 30px auto; text-align: left; } .ac-container label{ font-family: 'Arial Narrow', Arial, sans-serif; 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: #ffffff; background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%); background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 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); } .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(../images/arrow_down.png) no-repeat center center; } .ac-container input:checked + label:hover:after{ background-image: url(../images/arrow_up.png); } .ac-container input{ display: none; } .ac-container article{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; height: 0px; position: relative; z-index: 10; -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .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{ -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; 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 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; } |
Ну вот, теперь Вы знаете как сделать у себя на сайте «аккордеон» только с использованием CSS стилей.
Не забудбте подписаться на обновления сайта, чтобы не пропустить новые интересные статьи.
Удачи!
Пробовал ставить на вордпресс в статью. Между label появляется пробел примерно в 10рх. Не подскажите, как исправить?