How to collapse toggle using button

Here i have used collapse of 3 pannels and i have button on each pannel, when i click the button in 1st pannel, that pannel should be closed and then next pannel should get open. In have tried this but my jquery works like 1st pannel gets closed and gets opened too. Here I have attached the code

class="tab-pane" id="financials">
"financeform" method="post">
class="panel-group" id="accordion">
class="panel panel-default ">
class="panel-heading">
class="row">
class="col-xs-7 col-sm-8 col-md-6 panel-title" style="padding-top:5px">
"collapse" data-parent="#accordion" href="#collapse1" style="text-decoration:none">Household Income

class="col-md-3 control-label text-right">Total

class="col-xs-5 col-sm-4 col-md-3">

class="input-group pull-right font-bold" style="padding-top:7px;">

class="input-group-btn">$

"spanTotalIncome">

@*@Html.TextBox("txtTotalIncome", " ", new { @id = "txtTotalIncome", placeholder = "Amount", @class = "form-control textbox" })*@

@*"spanTotalIncome">@Html.Label("txtTotalIncome", " ", new { @id = "txtTotalIncome", placeholder = "Amount", @class = "control-label " })*@

@*class="input-group-">.00

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Nilesh Shah8y ago
@Monica,

can you extract your code only HTML,JS,jquery in an HTML file and post it as attachment .zip, then I can help further
Monica Priyadharshini8y ago
But this also not working
Nilesh Shah8y ago
this happens because of your wrong JS code

remove the last 2 JS function you have posted and use this:
$("#collapse1").on('hidden.bs.collapse', function(){
        $('#collapse2').collapse('show');
    });