.faq-item {
border: 1px solid #137cbf;
margin-bottom: 10px;
.faq-title {
padding: 16px 40px 16px 20px;
background-color: #137cbf;
margin: 0;
color: #fff;
font-size: 16px;
line-height: 1.3;
cursor: pointer;
position: relative;
&.active {
&:after {
transform: translateY(-50%) rotate(-45deg);
}
}
&:after {
position: absolute;
content: '';
top: calc(50%);
right: 5px;
background-image: url("../images/icons/more.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
transform: translateY(-50%);
transition: all 0.3s;
width: 34px;
height: 34px;
}
}
.faq-content {
display: none;
padding: 15px 20px;
}
}
$(".faq-item .faq-title").on("click", function () {
if ($(this).hasClass("active")) {
$(this).removeClass("active").next(".faq-content").slideUp();
} else {
$(".faq-item .faq-title").removeClass("active")
$(".faq-item .faq-content").slideUp();
$(this).toggleClass("active").next(".faq-content").slideToggle();
}
})
$(".faq-section .faq-item .faq-title").first().trigger('click');
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum id repellat labore illo pariatur suscipit provident debitis beatae sapiente quis doloribus ipsa accusamus, atque quidem omnis totam exercitationem cum fuga!