Давайте рассмотрим создание простого аккордеон на HTML и CSS3, который отлично работает при открытие и закрытие категорий. Здесь изначально идет 3 раздела, где можно добавлять, также удалять, и не нужно подключать библиотеку, все на скрипте отлично выводит, как на большом мониторе, так и на мобильном аппарате.
В материале вы узнаете, как создать простой аккордеон, который можно поставить на главную страницу, так и на отдельную, где создать красивое оформление под основной дизайн.
Установка:
HTML
Код
<div class="gutedam-kolesab">
<button class="debumolaskus">ZorNet.Ru — сайт для вебмастера</button>
<div class="kidetacan-ulogopad">
<p>
Попадание в руки Fortbyte 59 займет немного работы.
</p>
<p>
В этом руководстве мы рассмотрим все, что вам нужно знать Season 9.
</p>
</div>
<button class="debumolaskus">
Адаптивное модальное окно</button>
<div class="kidetacan-ulogopad">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<button class="debumolaskus">
Табы в виде аккордеона на CSS</button>
<div class="kidetacan-ulogopad">
<p>
Попадание в руки Fortbyte 59 займет немного работы.
</p>
</div>
</div>
CSS
Код
.gutedam-kolesab {
width: 72%;
max-width: 576px;
margin: 17px auto;
}
button.debumolaskus {
width: 100%;
background-color: whitesmoke;
border: none;
outline: none;
text-align: left;
padding: 15px 20px;
font-size: 18px;
color: #333;
cursor: pointer;
transition: background-color 0.2s linear;
}
button.debumolaskus:after {
content: '\f055';
font-family: "fontawesome";
font-size: 14px;
float: right;
}
button.debumolaskus.is-open:after {
content: '\f056';
}
button.debumolaskus:hover, button.debumolaskus.is-open {
background-color: #ddd;
}
.kidetacan-ulogopad {
background-color: white;
border-left: 1px solid whitesmoke;
border-right: 1px solid whitesmoke;
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-in-out;
}
JS
Код
var accordions = document.getElementsByClassName("debumolaskus");
for (var i = 0; i < accordions.length; i++) {
accordions[i].onclick = function() {
this.classList.toggle('is-open');
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
}
}
Также не забываем подключить шрифтовые иконки, что присутствую по правую сторону, где при открытие меняются по знакам.
Демонстрация
