CODEWITHSUNDEEP
javascriptjquery
debharlock
debharlock

Reputation: 69

accordion on jquery. I can not close active element

I'm trying to create an accordion effect. I can do so that the section is expanded but I can not figure out how to close one already open.

Can you give me a hand?

function cws_accordion_init (){
    jQuery.fn.cws_accordion = function () {
        jQuery(this).each(function (){
            var sections = jQuery(this).find(".accordion_section");
            sections.each( function (index, value){
                var section_index = index;
                jQuery(this).find(".accordion_title").on("click", function (){
                    jQuery(this).siblings(".accordion_content").slideDown("300");
                    sections.eq(section_index).addClass("active");
                    sections.eq(section_index).siblings().removeClass("active").find(".accordion_content").slideUp("300");
                });
            });
        });
    }
}

html

<section class='cws-widget'>

    <section class='cws_widget_content toggle_widget'>
        <div class='accordion_section featured_check_up'>
            <div class='accordion_title'>title 1</div>
            <div class='accordion_content' style='display: none;'>
                <p>fhshjsjf isfi fhsuhsj dsihdisj dshd disd jdijd shd is disu</p>
            </div>
        </div>

        <div class='accordion_section featured_check_up'>
            <div class='accordion_title'>title 2</div>
            <div class='accordion_content' style='display: none;'>
                <p>djjdjdijisjdisjidjsijdisjdisjdis</p>
            </div>
        </div>



    </section>

</section>

Upvotes: 0

Views: 41

Answers (1)

NOBrien
NOBrien

Reputation: 459

This will toggle the accordion that is selected and close all the others:

$(".accordion_title").on("click", function (){
  $(this).siblings(".accordion_content").slideToggle("300");
  $(this).addClass("active");
  $(".accordion_title").not(this).removeClass("active");
  $(".accordion_title").not(this).siblings(".accordion_content").slideUp("300");
});

Upvotes: 1

Related Questions