все гайды
Гайд по компоненту с названием аккордеон

Задача
Аккордеон в веб приложениях служит для компактного хранения текста. Создадим такой компонент интерфейса с помощью css и html. Хорошая практика заключается в том, что бы правильно создать структуру документа html. Каждый текст должен относится к своему родительскому блоку. Подключаем css и аккордеон готов!
HTML
<!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="UTF-8">
<title>Accordion</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Facts About Justice IT</h1>
<div class="acc-container">
<div>
<input type="radio" name="acc" id="acc1" checked>
<label for="acc1">Specialists</label>
<div class="acc-body">
There are more than 25 specialists in our team, the main value of our company is people.
</div>
</div>
<div>
<input type="radio" name="acc" id="acc2">
<label for="acc2">Events held this year</label>
<div class="acc-body">
Inside our company, there are masterclasses from employees to improve their qualifications,
various seminars and offsite conferences, as well as team-building programs - tennis on weekends
and Justice Friday with games and pizza!
</div>
</div>
<div>
<input type="radio" name="acc" id="acc3">
<label for="acc3">
Training-events
<i class="arrow down"></i>
</label>
<div class="acc-body">
Our employees regularly take part in various trainings,
where they are given the opportunity to improve their professional skills.
</div>
</div>
<div>
<input type="radio" name="acc" id="acc4">
<label for="acc4">Completed FinTech</label>
<div class="acc-body">
Our main specialization is the FinTech and E-commerce industries.
</div>
</div>
<div>
<input type="radio" name="acc" id="acc5">
<label for="acc5">Kg of scrap paper</label>
<div class="acc-body">
20kg of scrap paper and more than 100 PET bottles were recyclables.
</div>
</div>
<div>
<input type="radio" name="acc" id="acc6">
<label for="acc6">“Green” promotions</label>
<div class="acc-body">
Two “green” promotions were held in cooperation with coffee houses.
</div>
</div>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
background-color: #5382E7;
font-family: 'Inter', sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
max-width: 700px;
width: 100%;
}
h1 {
color: #fff;
text-align: center;
}
.acc-container {
width: 100%;
margin: auto;
}
.acc-container .acc-body {
margin: 0 auto;
height: 0;
color: rgba(0, 0, 0, 0);;
background-color: rgba(255, 255, 255, 0.2);
line-height: 28px;
padding: 0 20px;
box-sizing: border-box;
transition: 0.5s;
}
.acc-container label {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: block;
padding: 15px;
width: 100%;
color: #fff;
font-weight: 400;
box-sizing: border-box;
z-index: 100;
}
.acc-container input {
display: none;
}
.acc-container label:before {
border-style: solid;
border-width: 0.15em 0.15em 0 0;
content: '';
display: inline-block;
height: 0.45em;
left: 0.15em;
top: 0.15em;
vertical-align: top;
width: 0.45em;
float: right;
transform: rotate(135deg);
}
.acc-container input:checked + label {
background-color: rgba(255, 255, 255, 0.15);
}
.acc-container input:checked ~ .acc-body {
height: auto;
color: #fff;
font-size: 16px;
padding: 20px;
transition: 0.5s;
}