Как сделать аккордеон в html css
Научитесь создавать аккордеон с помощью HTML и CSS с помощью нашей пошаговой инструкции. Мы пройдем по всем шагам создания аккордеона, покажем пример с использованием всех навыков.
Аккордеон можно сделать с помощью HTML, CSS и JavaScript. Это вид выпадающего меню, которое позволяет пользователю разворачивать и сворачивать секции с информацией. Пример аккордеона с использованием HTML, CSS и JavaScript приведен ниже.
Код HTML
<div class="accordion">
<div class="accordion-item">
<a>Section 1</a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="accordion-item">
<a>Section 2</a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="accordion-item">
<a>Section 3</a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
Код CSS
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion-item .content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
Код JavaScript
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
В приведенном выше примере создается аккордеон с 3 секциями. В каждой секции можно иметь свою собственную информацию. Когда пользователь кликает на секцию, она разворачивается и показывает информацию, а когда пользователь кликает повторно, секция закрывается. С помощью этого простого кода можно создать более комплексные аккордеоны, используя более сложные стили и применяя функции JavaScript.
c