Accordion jQuery
Рассмотрим создание Accordion без использования плагинов. Для его реализации мы будет использовать jQuery и CSS.
Структура:
.accordion - обёртка для аккордеона,
.accordion__item - вкладки аккордеона,
.accordion__title - заголовки,
.accordion__content - контент, который будет виден у активной вкладки.
<div class="accordion" id="accordion">
<div class="accordion__item active__item">
<div class="accordion__title">Tab name one</div>
<div class="accordion__content">The content one</div>
</div>
<div class="accordion__item">
<div class="accordion__title">Tab name two</div>
<div class="accordion__content">The content two</div>
</div>
<div class="accordion__item">
<div class="accordion__title">Tab name three</div>
<div class="accordion__content">The content three</div>
</div>
</div>Первый accordion__item имеет класс active__item для того, чтобы по умолчанию первая вкладка была открыта, если в этом нет надобности, то этот класс можно просто удалить из HTML разметки.
Стили для аккордеона
Наш Accordion jQuery будет иметь следующие стили, которые вы легко можете изменить под себя.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: medium none;
list-style: none
}
body {
font-family: sans-serif;
}
.accordion {
width:100%;
max-width: 600px;
margin: 0 auto;
}
.accordion .accordion__item {
margin-bottom: 1px;
position: relative
}
/* заголовки панелей аккордеона */
.accordion .accordion__title {
font-weight: 400;
font-size: 18px;
color: #ededed;
cursor: pointer;
background: #37474f;
padding: 10px 55px 10px 15px;
transition: all .2s linear 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* переключатель панелей, положение вниз */
.accordion .accordion__title::before {
content: '';
height: 8px;
width: 8px;
display: block;
border: 2px solid #fefcfe;
border-right-width: 0;
border-top-width: 0;
transform: rotate(-45deg);
position: absolute;
right: 20px;
top: 18px
}
/* активный переключатель, положение вверх */
.accordion .active__item .accordion__title:before {
border: 2px solid #fefcfe;
border-left-width: 0;
border-bottom-width: 0;
top: 18px;
}
.accordion .accordion__title:hover {
background: #455b64;
}
/* заголовок активного блока */
.accordion .active_block .accordion__title {
background: #455b64;
color:#fefcfe
}
/* контент */
.accordion .accordion__content {
display:none;
padding:10px 15px;
overflow: hidden;
background:#f7f8f7
}Немного пояснений:
- для .accordion мы задали max-width:600px и width:100% для того чтобы наш аккордеон смотрелся на всех разрешениях достойно;
- c помощью псевдоэлемента ::before мы создали переключатель в виде стрелки;
- при помощи удаления / добавления класса active__item мы будем поворачивать стрелку.
Теперь, самое важное и интересное, это jQuery
$(function() {
// открываем вкладку по умолчанию
$('.active__item .accordion__content').slideDown();
$('#accordion .accordion__title').on('click', function(){
$('#accordion .accordion__content').not( $(this).next() ).slideUp(299);
$('.accordion__item').removeClass('active__item');
$(this).next().slideDown(299).parent().addClass('active__item');
});
});До javascript-кода обязательно должен быть подключен jQuery
Если вам понравилась данная статья, рекомендую к прочтению адаптивные вертикальные вкладки для сайта.
| English | Russian |
|---|---|
| Accordion | Гармошка |
| Outline | Контур, обводка |
| Rotate | Вращать |
| Slide Up/Down | Скользить вверх/вниз |
| Toggle | Переключатель |
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.