How can I collapse one panel as soon as the other button is clicked? I tried many methods but it's still not working.
$(function() {
$('.accordion .accordion-control').on('click', function(e) {
e.preventDefault();
$(this).next('.accordion-panel').not(':animated').slideToggle();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="accordion">
<li>
<button class="accordion-control">A</button>
<div class="accordion-panel">AAAAAA</div>
<button class="accordion-control">B</button>
<div class="accordion-panel">BB</div>
</li>
</ul>