3
Answers

How to collapse toggle using button

Monica Priyadharshini

Monica Priyadharshini
7y
168
1
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
  1. <div class="tab-pane" id="financials">  
  2. <br />  
  3. <form id="financeform" method="post">  
  4. <div class="panel-group" id="accordion">  
  5. <div class="panel panel-default ">  
  6. <div class="panel-heading">  
  7. <div class="row">  
  8. <div class="col-xs-7 col-sm-8 col-md-6 panel-title" style="padding-top:5px">  
  9. <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" style="text-decoration:none">Household Income</a>  
  10. </div>  
  11. <h5 class="col-md-3 control-label text-right"><b>Total</b></h5>  
  12. <div class="col-xs-5 col-sm-4 col-md-3">  
  13. <div class="input-group pull-right font-bold" style="padding-top:7px;">  
  14. <div class="input-group-btn">$</div>  
  15. <span id="spanTotalIncome"></span>  
  16. @*@Html.TextBox("txtTotalIncome", " ", new { @id = "txtTotalIncome", placeholder = "Amount", @class = "form-control textbox" })*@  
  17. @*<span id="spanTotalIncome">@Html.Label("txtTotalIncome", " ", new { @id = "txtTotalIncome", placeholder = "Amount", @class = "control-label " })</span>*@  
  18. @*<div class="input-group-">.00</div>*@  
  19. </div>  
  20. </div>  
  21. </div>  
  22. </div>  
  23. <div id="collapse1" class="panel-collapse collapse in">  
  24. <div class="panel-body">  
  25. <a>pannel 1</a>  
  26. <input type="submit" id="btnFinancialIncome" name="btnFinancialIncome" class="next btn btn-info" value="Submit" disabled="disabled" style="float:right" />  
  27. </div>  
  28. </div>  
  29. </div>  
  30. <div class="panel panel-default">  
  31. <div class="panel-heading">  
  32. <div class="row">  
  33. <div class="col-xs-7 col-sm-8 col-md-6 panel-title" style="padding-top:5px">  
  34. <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" style="text-decoration:none">Household Expenses</a>  
  35. </div>  
  36. <h5 class="col-md-3 control-label text-right"><b>Total Debt</b></h5>  
  37. <div class="col-xs-5 col-sm-4 col-md-3">  
  38. <div class="input-group pull-right font-bold" style="padding-top:7px;">  
  39. <div class="input-group-btn">$</div>  
  40. <span id="spantotalExpense" ">@Html.Label("txtExpences", "", new { @id = "txtTotalExpences", placeholder = "Amount", @class = "control-label" })</span>  
  41. @*@Html.TextBox("txtExpences", "", new { @id = "txtTotalExpences", placeholder = "Amount", @class = "form-control textbox" })*@  
  42. @*<div class="input-group-addon">.00</div>*@  
  43. </div>  
  44. </div>  
  45. </div>  
  46. </div>  
  47. <div id="collapse2" class="panel-collapse collapse">  
  48. <div class="panel-body">  
  49. <a>pannel 2</a>  
  50. <input type="submit" id="btnFinancialExpense" name="btnFinancialExpense" class="next btn btn-info" value="Submit" style="float:right" disabled="disabled" />  
  51. </div>  
  52. </div>  
  53. </div>  
  54. <div class="panel panel-default">  
  55. <div class="panel-heading">  
  56. <div class="row">  
  57. <div class="col-xs-7 col-sm-8 col-md-6 panel-title" style="padding-top:5px">  
  58. <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" style="text-decoration:none">Household Expenses</a>  
  59. </div>  
  60. <h5 class="col-md-3 control-label text-right"><b>Total Assets</b></h5>  
  61. <div class="col-xs-5 col-sm-4 col-md-3">  
  62. <div class="input-group pull-right font-bold" style="padding-top:7px;">  
  63. <div class="input-group-btn">$</div>  
  64. <span id="spanTotalAssets">@Html.Label("txtTotalAssets", "", new { @id = "txtTotalAssets", placeholder = "Amount", @class = "control-label" })</span>  
  65. @*@Html.TextBox("txtTotalAssets", "", new { @id = "txtTotalAssets", placeholder = "Amount", @class = "form-control textbox" })*@  
  66. @*<div class="input-group-addon">.00</div>*@  
  67. </div>  
  68. </div>  
  69. </div>  
  70. </div>  
  71. <div id="collapse3" class="panel-collapse collapse">  
  72. <div class="panel-body">  
  73. <a>Pannel 3</a>  
  74. <input type="submit" id="btnFinancialAsset" name="btnFinancialAsset" class="next btn btn-info" value="Submit" style="float:right" disabled="disabled" />  
  75. </div>  
  76. </div>  
  77. </div>  
  78. my script:  
  79. $('.panel-collapse.in').collapse('show', function () {  
  80. $('#collapse1').collapse('hide');  
  81. });  
  82. $('.panel-collapse.in').collapse('show', function () {  
  83. $('#collapse2').collapse('show');  
  84. });
Answers (3)
1
Nilesh Shah

Nilesh Shah

NA 22.3k 214.9k 7y
this happens because of your wrong JS code
 
remove the last 2 JS function you have posted and use this:
 
  1. $("#collapse1").on('hidden.bs.collapse', function(){  
  2.         $('#collapse2').collapse('show');  
  3.     }); 
 
0
Nilesh Shah

Nilesh Shah

NA 22.3k 214.9k 7y
@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
0
Monica Priyadharshini

Monica Priyadharshini

NA 73 1.3k 7y
But this  also not working
 
Next Recommended Forum