← Каталог
Типовые элементы интерфейса — Аккордеон (Accordion)
Фрагмент из «Типовые элементы интерфейса»: Аккордеон (Accordion).
<div class="accordion">
<details class="accordion__item" open>
<summary class="accordion__title">Что такое UX?</summary>
<div class="accordion__body">
<p>UX — опыт пользователя при достижении цели в продукте.</p>
</div>
</details>
<details class="accordion__item">
<summary class="accordion__title">Чем UI отличается от UX?</summary>
<div class="accordion__body">
<p>UI — визуальная и интерактивная оболочка, через которую реализуется UX.</p>
</div>
</details>
<details class="accordion__item">
<summary class="accordion__title">Нужен ли JavaScript для аккордеона?</summary>
<div class="accordion__body">
<p>Для простого FAQ достаточно HTML; для сложного поведения — скрипт.</p>
</div>
</details>
</div><div class="accordion">
<details class="accordion__item" open>
<summary class="accordion__title">Что такое UX?</summary>
<div class="accordion__body">
<p>UX — опыт пользователя при достижении цели в продукте.</p>
</div>
</details>
<details class="accordion__item">
<summary class="accordion__title">Чем UI отличается от UX?</summary>
<div class="accordion__body">
<p>UI — визуальная и интерактивная оболочка, через которую реализуется UX.</p>
</div>
</details>
<details class="accordion__item">
<summary class="accordion__title">Нужен ли JavaScript для аккордеона?</summary>
<div class="accordion__body">
<p>Для простого FAQ достаточно HTML; для сложного поведения — скрипт.</p>
</div>
</details>
</div>.accordion {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 36rem;
}
.accordion__item {
border: 1px solid #e9ecef;
border-radius: 10px;
background-color: #ffffff;
overflow: hidden;
}
.accordion__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.875rem 1rem;
font-weight: var(--font-weight-semibold);
color: var(--color-dark);
cursor: pointer;
list-style: none;
}
.accordion__title::-webkit-details-marker {
display: none;
}
.accordion__title::after {
content: "+";
font-size: 1.25rem;
line-height: 1;
color: var(--color-primary);
transition: transform 0.2s ease;
}
.accordion__item[open] .accordion__title::after {
transform: rotate(45deg);
}
.accordion__body {
padding: 0 1rem 1rem;
color: #64748b;
line-height: 1.5;
}
.accordion__body p {
margin: 0;
}.accordion {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 36rem;
}
.accordion__item {
border: 1px solid #e9ecef;
border-radius: 10px;
background-color: #ffffff;
overflow: hidden;
}
.accordion__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.875rem 1rem;
font-weight: var(--font-weight-semibold);
color: var(--color-dark);
cursor: pointer;
list-style: none;
}
.accordion__title::-webkit-details-marker {
display: none;
}
.accordion__title::after {
content: "+";
font-size: 1.25rem;
line-height: 1;
color: var(--color-primary);
transition: transform 0.2s ease;
}
.accordion__item[open] .accordion__title::after {
transform: rotate(45deg);
}
.accordion__body {
padding: 0 1rem 1rem;
color: #64748b;
line-height: 1.5;
}
.accordion__body p {
margin: 0;
}