accordion.js collapse.js выпадающий список

accordion.html

<!-- HTML -->
<div class="accordion-container">
    <a href="#" class="accordion-toggle">Heading 1</a>
    <div class="accordion-content">
        Content 1
    </div>
</div>
<div class="accordion-container">
    <a href="#" class="accordion-toggle">Heading 2</a>
    <div class="accordion-content">
        Content 2
    </div>
</div>
<div class="accordion-container">
    <a href="#" class="accordion-toggle">Heading 3</a>
    <div class="accordion-content">
        Content 3
    </div>
</div>
<!-- /HTML -->



<!-- JS -->
$(document).ready(function () {
    $('.accordion-toggle').on('click', function(event){
        event.preventDefault();
        var accordion = $(this);
        var accordionContent = accordion.next('.accordion-content');
        var hideContent = $('.accordion-toggle').next('.accordion-content');
        var rmActiveLink = $('.accordion-toggle');
        rmActiveLink.removeClass("active");
        hideContent.removeClass("active");
        accordion.toggleClass("active");
        accordionContent.toggleClass("active");
    });
});
<!-- /JS -->


<!-- CSS -->
.accordion-content{display: none;}
.accordion-content.active{display: block;}
.accordion-container {border: 1px solid #ccc;margin: 10px;border-radius: 5px;}
.accordion-container a.accordion-toggle{background: #f7f7f7;margin-bottom: 20px}
<!-- /CSS -->