Here is a functional codepen link: https://codepen.io/boingloings33/pen/PoXpLWR
I have created an accordion that works well, but I am having trouble with auto-collapsing the open slide when clicking on the next one. Any assistance would be highly appreciated, thank you.
HTML:
<body>
<div class="container">
<div class="accordion" id="accordion-1">
<div class="head">
<h2>Title 1</h2>
</div>
<div class="content">
<p> lorem ipsum </p>
</div>
</div>
<br />
<div class="accordion" id="accordion-2">
<div class="head">
<h2>Title 2</h2>
<i class="fas fa-angle-down arrow"></i>
</div>
<div class="content">
<p> lorem ipsums </p>
</div>
</div>
</body>
JS:
jQuery(function () {
$(".head").on("click", function () {
$(this).toggleClass("active");
$(this).parent().find(".arrow").toggleClass("arrow-animate");
$(this).parent().find(".content").slideToggle(280);
});
});
CSS:
.accordion {
box-shadow: 0px 1px 7px #dbdbdb;
}
.accordion .head {
background-color: #ffffff;
color: #563e6e;
padding: 20px 30px;
cursor: pointer;
transition: 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion .head:hover,
.accordion .active {
background-color: #ffe77aff;
}
.accordion .content {
background-color: #ffffff;
display: none;
padding: 20px 30px;
color: #333333;
}