How To Open And Collapse The Same Jquery Accordion With Click On It Only

Trying to get the accordion open and collapse only when it's being clicked. I am able to open/collapse it but it is getting closed also when another accordion is clicked. It should

Solution 1:

I have created a new fiddle with some css...

HTML

<divclass="accordion-container"><ahref="#"class="accordion-toggle">Heading 1</a><divclass="accordion-content">
        Content 1
    </div></div><divclass="accordion-container"><ahref="#"class="accordion-toggle">Heading 2</a><divclass="accordion-content">
        Content 2
    </div></div><divclass="accordion-container"><ahref="#"class="accordion-toggle">Heading 3</a><divclass="accordion-content">
        Content 3
    </div></div>

JS

$(document).ready(function () {
    $('.accordion-toggle').on('click', function(event){
        event.preventDefault();
        // create accordion variablesvar accordion = $(this);
        var accordionContent = accordion.next('.accordion-content');

        // toggle accordion link open class
        accordion.toggleClass("open");
        // toggle accordion content
        accordionContent.slideToggle(250);

    });
});

please check this fiddle

Solution 2:

Easy and simple bootstrap accordion on a click HTML

<buttontype="button"class="btn openpanel">Open panel 3</button><buttontype="button"class="btn closepanel">Close panel 3</button><hr><divclass="panel-group"id="accordion"><divclass="panel panel-default"><divclass="panel-heading"><h4class="panel-title"><aclass="accordion-toggle"data-toggle="collapse"data-parent="#accordion"href="#panel1">Panel 1</a></h4></div><divid="panel1"class="panel-collapse collapse"><divclass="panel-body">
                Contents panel 1
            </div></div></div><divclass="panel panel-default"><divclass="panel-heading"><h4class="panel-title"><aclass="accordion-toggle"data-toggle="collapse"data-parent="#accordion"href="#panel2">Panel 2</a></h4></div><divid="panel2"class="panel-collapse collapse"><divclass="panel-body">
                Contents panel 2
            </div></div></div><divclass="panel panel-default"><divclass="panel-heading"><h4class="panel-title"><aclass="accordion-toggle"data-toggle="collapse"data-parent="#accordion"href="#panel3">Panel 3</a></h4></div><divid="panel3"class="panel-collapse collapse"><divclass="panel-body">
                Contents panel 3
            </div></div></div></div>

Simple js code

$(".openpanel").on("click", function() {
   $("#panel3").collapse('show');
});
$(".closepanel").on("click", function() {
   $("#panel3").collapse('hide');
});
$('#accordion').on('show.bs.collapse', function () {
   $('#accordion .in').collapse('hide');
});

I hope it will help you.