How to collapse toggle using button

Question

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

<div class="tab-pane" id="financials">
<br />
<form id="financeform" method="post">
<div class="panel-group" id="accordion">
<div class="panel panel-default ">
<div class="panel-heading">
<div class="row">
<div class="col-xs-7 col-sm-8 col-md-6 panel-title" style="padding-top:5px">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" style="text-decoration:none">Household Income</a>
</div>
<h5 class="col-md-3 control-label text-right"><b>Total</b></h5>
<div class="col-xs-5 col-sm-4 col-md-3">
<div class="input-group pull-right font-bold" style="padding-top:7px;">
<div class="input-group-btn">$</div>
<span id="spanTotalIncome"></span>
@*@Html.TextBox("txtTotalIncome", " ", new { @id = "txtTotalIncome", placeholder = "Amount", @class = "form-control textbox" })*@
@*<span id="spanTotalIncome">@Html.Label("txtTotalIncome", " ", new { @id = "txtTotalIncome", placeholder = "Amount", @class = "control-label " })</span>*@
@*<div class="input-group-">.00</div>*@
</div>
</div>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<a>pannel 1</a>
<input type="submit" id="btnFinancialIncome" name="btnFinancialIncome" class="next btn btn-info" value="Submit" disabled="disabled" style="float:right" />
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-xs-7 col-sm-8 col-md-6 panel-title" style="padding-top:5px">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2" style="text-decoration:none">Household Expenses</a>
</div>
<h5 class="col-md-3 control-label text-right"><b>Total Debt</b></h5>
<div class="col-xs-5 col-sm-4 col-md-3">
<div class="input-group pull-right font-bold" style="padding-top:7px;">
<div class="input-group-btn">$</div>
<span id="spantotalExpense" ">@Html.Label("txtExpences", "", new { @id = "txtTotalExpences", placeholder = "Amount", @class = "control-label" })</span>
@*@Html.TextBox("txtExpences", "", new { @id = "txtTotalExpences", placeholder = "Amount", @class = "form-control textbox" })*@
@*<div class="input-group-addon">.00</div>*@
</div>
</div>
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<a>pannel 2</a>
<input type="submit" id="btnFinancialExpense" name="btnFinancialExpense" class="next btn btn-info" value="Submit" style="float:right" disabled="disabled" />
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-xs-7 col-sm-8 col-md-6 panel-title" style="padding-top:5px">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3" style="text-decoration:none">Household Expenses</a>
</div>
<h5 class="col-md-3 control-label text-right"><b>Total Assets</b></h5>
<div class="col-xs-5 col-sm-4 col-md-3">
<div class="input-group pull-right font-bold" style="padding-top:7px;">
<div class="input-group-btn">$</div>
<span id="spanTotalAssets">@Html.Label("txtTotalAssets", "", new { @id = "txtTotalAssets", placeholder = "Amount", @class = "control-label" })</span>
@*@Html.TextBox("txtTotalAssets", "", new { @id = "txtTotalAssets", placeholder = "Amount", @class = "form-control textbox" })*@
@*<div class="input-group-addon">.00</div>*@
</div>
</div>
</div>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<a>Pannel 3</a>
<input type="submit" id="btnFinancialAsset" name="btnFinancialAsset" class="next btn btn-info" value="Submit" style="float:right" disabled="disabled" />
</div>
</div>
</div>
my script:
$('.panel-collapse.in').collapse('show', function () {
$('#collapse1').collapse('hide');
});
$('.panel-collapse.in').collapse('show', function () {
$('#collapse2').collapse('show');
});