Аккордеон для сайта на jquery
05.07.2022
На большинстве сайтах можно встретить раскрывающийся по горизонтали список. Обычно такой список называют аккордеон, а как его сделать, вы узнаете в этой статье.
Виды аккордеона
Я выделил для себя два вида аккордеона:
- Первый – это «Свободный», когда все пункты могут быть либо закрыты, либо открыты, при этом каждый пункт независим друг от друга;
- Второй – это «Классический (активный только один пункт)». Здесь всё просто, при нажатии закрытый пункт открывается, а открытый всегда закрывается, именно создание такого вида будет рассмотрено в данной статье.
HTML разметка
По традиции начнем с разметки нашего аккордеона:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Accordion</title>
<link rel="icon" href="img/icon.jpg" type="icon/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style/normalize.css">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<!-- div .wrapp -->
<div class="wrapp">
<!-- main .main -->
<main class="main">
<!-- section .section -->
<section id="section" class="section">
<div class="content">
<div class="section__item">
<h2 class="section__title">Accordion с одним открытым пунктом</h2>
<ul class="accordion_one_item">
<li class="accordion__item active">
<h3 class="accordion__header">
<span class="accordion__bl"></span>
<span class="accordion__title">Accordion Title 1</span>
</h3>
<div class="accordion__body">
<p class="accordion__descript">Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Debitis, reprehenderit nostrum molestiae velit commodi doloremque?
</p>
</div>
</li>
<li class="accordion__item">
<h3 class="accordion__header">
<span class="accordion__bl"></span>
<span class="accordion__title">Accordion Title 2</span>
</h3>
<div class="accordion__body">
<p class="accordion__descript">Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Debitis, reprehenderit nostrum molestiae velit commodi doloremque?
</p>
</div>
</li>
<li class="accordion__item">
<h3 class="accordion__header">
<span class="accordion__bl"></span>
<span class="accordion__title">Accordion Title 3</span>
</h3>
<div class="accordion__body">
<p class="accordion__descript">Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Debitis, reprehenderit nostrum molestiae velit commodi doloremque?
</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- section END -->
</main>
<!-- main .main END -->
</div>
<!-- /div .wrapp END -->
<!-- script -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/js.js"></script>
<!-- script END -->
</body>
</html>
Вот так будет выглядеть аккордеон на данном этапе:
- .accordion__item – это самый главный элемент, при нажатии на который будет открываться/закрываться аккордеон;
- .accordion__bl – это круг, внутри которого будет плюс (закрытый пункт) или минус (открытый пункт);
Стилизация аккордеона
Теперь нужно наш аккордеон стилизовать:
/* general *******************************************/
/****************************************************/
:root {
--title-color: #000;
}
* {
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
margin: 0;
padding: 0;
}
.wrapp {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
z-index: 1;
}
.content {
max-width: 1140px;
width: 100%;
padding: 0 20px;
margin: 0 auto;
}
.section__item+.section__item {
margin-top: 100px;
}
.section__title {
margin-bottom: 100px;
margin-top: 0;
font-size: 70px;
font-weight: 800;
color: var(--title-color);
}
/* accordion *****************************************/
/****************************************************/
.accordion__item {
position: relative;
padding-bottom: 30px;
list-style: none;
border-bottom: 1px solid #E3E3E3;
cursor: pointer;
user-select: none;
}
.accordion__item+.accordion__item {
margin-top: 30px;
}
.accordion__header {
position: relative;
padding-right: 110px;
}
.accordion__bl {
position: absolute;
width: 26px;
height: 26px;
top: 50%;
right: 0;
border: 2.5px solid #899193;
border-radius: 50%;
pointer-events: none;
transform: translateY(-50%);
transition: .4s;
}
.accordion__bl::before,
.accordion__bl::after {
position: absolute;
content: '';
width: 13.33px;
height: 2.67px;
top: 50%;
left: 50%;
background: #899193;
transform: translate(-50%, -50%);
border-radius: 2px;
transition: .4s;
}
.accordion__bl::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.accordion__item.active .accordion__bl {
border-color: #000;
}
.accordion__item.active .accordion__bl::before,
.accordion__item.active .accordion__bl::after {
background: #000;
}
.accordion__item.active .accordion__bl::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(0);
}
.accordion__title {
font-family: var(--font-regular1);
font-weight: 400;
font-size: 30px;
font-weight: 700;
line-height: 33.6px;
color: var(--title-color2);
}
.accordion__body {
display: none;
padding-top: 15px;
}
.accordion__descript {
max-width: 520px;
width: 100%;
font-family: var(--font-regular2);
font-size: 18px;
line-height: 150%;
color: #0C0C0D;
}
.accordion__li {
position: relative;
margin-top: 16px;
padding-left: 32px;
font-family: var(--font-regular2);
font-size: 18px;
line-height: 150%;
color: #0C0C0D;
list-style: none;
}
.accordion__li::before {
position: absolute;
content: '';
width: 22.12px;
height: 10.58px;
top: 9px;
left: 0;
background: #FFD948;
border-radius: 50%;
transform: matrix(0.97, -0.24, 0.24, 0.97, 0, 0);
}
.accordion__li:nth-child(even):before {
background: #B6E3E0;
}
.accordion__link {
text-decoration: none;
color: #256370;
}
.accordion__link:hover {
text-decoration: underline;
}
.accordion_one_item .accordion__item:first-child {
pointer-events: none;
}
.accordion_one_item .accordion__item:first-child .accordion__body {
display: block;
}
После добавления стилей, аккордеон имеет такой вид:
.accordion__bl::before,.accordion__bl::after - это наш плюс (строки 75-87)
.accordion__item.active .accordion__bl - перекрашивает серый круг в черный, что в свою очередь сигнализирует о том, что текущий пункт активный (строки 93-95).
Чтобы первый пункт после загрузки сайта был всегда активен, необходимо вставить код, который подсвечен в строках 166-168,170-172.
Пишем скрипт работы аккордеона
Теперь, после добавления html – разметки и css – стилей, переходим к написанию javaScript кода. Я же буду пользоваться библиотекой jquery:
$(function () {
'use strict';
//accordion
//one item accordion
function oneItemAckordion() {
//при нажатии на .accordion__item вызываем событие клика
$('.accordion_one_item .accordion__item').on('click', function () {
//записываем переменную для анимации появления и исчезновения пунктов в милисекундах
const timeAnim = 250;
//данная строка кода нужна для того что бы была возможность взаимодействия с неактивными пунктами
$('.accordion_one_item .accordion__item').removeClass('active').css({ 'pointer-events': 'auto' });
//данная строка кода нужна для того что бы невозможно было нажимать на активный пункт
$(this).addClass('active').css({ 'pointer-events': 'none' });
//при клике все пункты скрываются кроме нажатого
$('.accordion_one_item .accordion__header').next().slideUp(timeAnim);
//при клике открывается нажатый нами пункт
$(this).find('.accordion__header').next().slideDown(timeAnim);
});
}
oneItemAckordion();
});
Посмотреть демо можно в CodePen
Готовый код доступен на GitHub
Теперь вам будет достаточно легко и просто сделать аккордеон для своего сайта.
Подписывайтесь на новости блога, чтобы не пропускать новые, еще более интересные статьи!
Также подписывайтесь на мой instagram и telegram, там вы сможете найти много полезной информации и не сможете пропустить новые статьи.
комментарии (0)
написать комментарийкомментариев нет