Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to Accordions
Preview Source Code
Download
HTML
CSS
body {
 margin: 0px;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

.faq-section {
 font-family: "Poppins", sans-serif;
 background-color: #133667;
 padding: 60px 0;
 text-align: center;
 background-position: bottom right 0%;
}

.faq-section .faq_left_half_circle {
 position: absolute;
 left: 80px;
}

.faq-section .faq_left_half_circle img {
 position: relative;
 top: 140px;
}

.faq-section h3 {
 color: #fff;
 text-align: center;
 padding-bottom: 50px;
 font-size: 30px;
 margin: 0px;
}

.faq-section .faq-accordions {
 max-width: 760px;
 margin: 0 auto;
}

.faq-section .faq-accordions .accordion-row {
 padding-top: 15px;
 padding-bottom: 15px;
 border-bottom: 1px solid #3566ac;
 cursor: pointer;
}

.faq-section .faq-accordions .accordion-row .title {
 text-align: left;
 color: #fff;
 font-size: 22px;
 font-weight: 500;
 position: relative;
 padding-right: 30px;
}

.faq-section .faq-accordions .title:after {
 content: '';
 position: absolute;
 border-left: #fff 2px solid;
 border-bottom: #fff 2px solid;
 right: 10px;
 top: 8px;
 -moz-transition: all .5s linear;
 -webkit-transition: all .5s linear;
 transition: all .5s linear;
 width: 10px;
 height: 10px;
 z-index: 1;
 transform: rotate(-45deg);
}

.faq-section .faq-accordions .title.open:after {
 transform: rotate(135deg);
 top: 14px;
}

.faq-section .faq-accordions .accordion-row .content {
 text-align: left;
 color: #fff;
 font-size: 16px;
 line-height: 30px;
 overflow: hidden;
 height: 0px;
 transition: 0.5s all;
}

.faq-section .faq-accordions .accordion-row .open + .content {
 height: auto;
 overflow: initial;
 padding: 20px 0px;
}
@media(max-width:1200px) {
.faq-section .faq-accordions .accordion-row .title {
    font-size: 18px;
}
}
JS
let items = document.querySelectorAll(".faq-section .faq-accordions .title");
items.forEach(function (t) {
t.addEventListener("click", function (e) {
	items.forEach(function (e) {
	e !== t || e.classList.contains("open")
		? e.classList.remove("open")
		: e.classList.add("open");
	});
});
});

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *