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;
}
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;
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:
jQuery(() => {
// открываем вкладку по умолчанию
$(".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.
Если вам понравилась данная статья, рекомендую к прочтению адаптивные вертикальные вкладки для сайта.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями: