Trying to implement an accordion feature that can be utilized across the entire website. The current logic seems to be partially functional... When I click on any of the accordions, it should open by adding a 'show' class, but this only works for the first accordion in the parent container.
Sometimes all the accordions open simultaneously, but the desired functionality is to allow users to individually open and close each accordion on the page.
(function ($) {
$(".accord").on("click", function (e) {
console.log(this);
$(".accordian-content").toggleClass("show");
});
})(jQuery);.accord {
background-color: $primary;
color: #111;
cursor: pointer;
padding: 10px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.accordian-content {
display: none;
}
.accordian-content.show {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<ul>
<li>
<button class="accord menu w-full my-[15px] cursor-pointer">
<div class="menu-item flex align-center p-2 justify-between gap-2 bg-primary">
<div class="title uppercase text-white font-bold"><?php echo $title; ?></div>
<span class="icon text-white scale-y-150 pr-[17.5px]">+</span>
</div>
<div class="accordian-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos totam, explicabo deserunt eaque molestiae dolorem perspiciatis? Eius iure veniam nulla architecto necessitatibus culpa debitis maxime velit voluptatum eos nesciunt quidem eveniet deleniti deserunt vel nemo ipsa beatae, harum dolore eligendi sequi quo unde. Adipisci minima id iste in nostrum voluptatibus.</p>
</div>
</button>
</li>
<!-- Repeat the above button code for other accordions -->
</ul>