Простой аккордеон на CSS и JS

Сегодня мы рассмотрим как с помощью CSS и JavaScript написать свой аккордеон. Итак условно вся работа будет разбита на три этапа.

  1. Разметка HTML
  2. Стили CSS
  3. Скрипт JS который управляет аккордеоном.

HTML

<div class="accordion">Lorem ipsum dolor sit amet</div>

<div class="panel">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

<div class="accordion">Duis posuere ante sed lacus rhoncus volutpat</div>
<div class="panel">
  <div>Nunc id nunc cursus, dignissim mauris eleifend, tincidunt nisi.</div>
</div>

<div class="accordion">In at eros id lectus varius viverra</div>
<div class="panel">
  <div>Fusce sagittis, ligula eget consectetur aliquam, felis massa consequat turpis, non ornare sem nisl feugiat dui.</div>

</div>

CSS

.accordion {
    background-color: rgba(96, 125, 139, 0.6);
    color: #FFF;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    line-height: 30px;
    padding: 6px 12px;
    transition: 0.25s;
}

.accordion.active, .accordion:hover {
    background-color: rgba(96, 125, 139, 0.8);
	color: #ffeb3b;
}

.accordion:after {
    content: '\25B6';
    color: #FFF;
    font-weight: bold;
    float: right;
    font-size: 24px;
    transition: 0.45s;
}

.accordion.active:after {
	transform: rotate(90deg);
}

.panel {
    background-color: #ffffff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin: 0;
    text-align: left;
	border: 1px solid rgba(255, 255, 255, 0);
	border-radius: 0px 0px 4px 4px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
	transition: 0.45s;
	
}

.panel:hover {
	border: 1px solid rgba(96, 125, 139, 0.4);
}
 
.panel>div {
    padding: 6px 10px;
    text-align: justify;
}

JS

var tmpObj = document.getElementsByClassName("accordion");
for (var i = 0; i < tmpObj.length; i++) {
	tmpObj[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";
		}
	});
}

Пример работы

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dui porttitor, laoreet neque eu, bibendum mauris. Ut congue pellentesque nisi. Proin eu consequat nisi. Suspendisse lacinia sem sit amet urna elementum vestibulum eget sit amet odio. Proin mattis arcu vitae justo laoreet feugiat. Nullam fringilla est tellus, scelerisque hendrerit justo faucibus sit amet. Vivamus non lacus viverra, tempus justo ac, consequat leo. Maecenas imperdiet erat vitae augue luctus tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tincidunt ex lorem, eu posuere sem hendrerit nec. Pellentesque sed tincidunt tortor, vitae tempor magna. Morbi tempus malesuada mauris vel blandit. Sed non pellentesque ipsum. Quisque nisi est, fringilla ut felis sed, cursus tempor ante. In in metus ut eros sollicitudin gravida ut congue quam. In hac habitasse platea dictumst.
Duis posuere ante sed lacus rhoncus volutpat
Nunc id nunc cursus, dignissim mauris eleifend, tincidunt nisi. Mauris dapibus et metus eget dictum. Aenean vel ante est. Proin ligula velit, sodales vitae rhoncus sed, cursus ac lorem. Donec semper diam at posuere commodo. Mauris imperdiet risus ligula, quis sollicitudin leo ultrices ac. Curabitur nunc odio, rhoncus eu condimentum ullamcorper, scelerisque nec leo.
In at eros id lectus varius viverra
Fusce sagittis, ligula eget consectetur aliquam, felis massa consequat turpis, non ornare sem nisl feugiat dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed nec turpis interdum, consequat neque sit amet, scelerisque elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin lacinia mauris quam, vulputate ornare ipsum vulputate id. Vivamus quis cursus mi. Curabitur cursus imperdiet mauris vitae porta. Nam vel tellus a ipsum condimentum ullamcorper.
Рейтинг: 5/5 - 3 голосов

Комментарии ()