使用多个按钮和 div 展开和折叠答案

【问题标题】：Expand and Collapse with multiple buttons and divs使用多个按钮和 div 展开和折叠
【发布时间】：2018-07-07 18:28:48
【问题描述】：

当再次单击按钮时，我需要帮助折叠 div。

我有这个代码：

$('#btn1').click(function() {
  $('.collapse').hide();
  $('#demo').show();
});
$('#btn2').click(function() {
  $('.collapse').hide();
  $('#demo1').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="customersCtrl">
  <button type="button" class="btn btn-default" data-toggle="collapse" data- target="#demo" id="btn1">Company Details</button>
  <button type="button" class="btn btn-default" data-toggle="collapse" data- target="#demo1" id="btn2">Commercial Details</button>
  <div id="demo" class="collapse">
    1st div
  </div>
  <div id="demo1" class="collapse">
    2nd div
  </div>
</div>

从这里：Bootstrap Collapse with multiple button and div

此代码有效并在单击 button2 时隐藏 div1 并展开 div2 但在再次单击 button2 时不会隐藏 div2。

有没有办法在单击 button1 时显示 div1，在单击 button2 时隐藏 div1 并展开 div2。但是当再次单击 button2 时，它会隐藏 div2，因此所有可折叠的 div 都被折叠，并且此行为也适用于 button1 和 div1。

【问题讨论】：

标签： jquery html css

【解决方案1】：

我会建议你先隐藏两个div，然后你可以使用toggle

堆栈片段

$('#demo1,#demo').hide()
$('#btn1').click(function() {
  $('#demo1').hide();
  $('#demo').toggle();
});
$('#btn2').click(function() {
  $('#demo').hide();
  $('#demo1').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="customersCtrl">
  <button type="button" class="btn btn-default" data-toggle="collapse" data- target="#demo" id="btn1">Company Details</button>
  <button type="button" class="btn btn-default" data-toggle="collapse" data- target="#demo1" id="btn2">Commercial Details</button>
  <div id="demo" class="collapse">
    1st div
  </div>
  <div id="demo1" class="collapse">
    2nd div
  </div>
</div>

【讨论】：

【解决方案2】：

像这样更新你的脚本

$('#btn1').click(function(){

      if($('#demo').is(':visible')){
           $('#demo').hide();
      }else{
          $('#demo1').hide();
          $('#demo').show();

      }

    });
    $('#btn2').click(function(){

      if($('#demo1').is(':visible')){
           $('#demo1').hide();
      }else{
           $('#demo').hide();
          $('#demo1').show();
      }
    });

【讨论】：

最初两个 div 都是打开的，如果你点击按钮 1，它会隐藏 div1 而不是 div 2
@Bhuwan 我稍微编辑了代码，按照 Ajeesh KH 给出的方法得到了我想要的结果
@HamzaAhmad 同意...:) 但您还必须向回答者提及他需要编辑他的答案，以便对其他用户也有帮助
@Bhuwan 谢谢 :) 以后会牢记这一点。

【解决方案3】：

$('#btn1').click(function(){
 // $('.collapse').hide();
  $('#demo1').hide();
  $('#demo').show();
});
$('#btn2').click(function(){
  //$('.collapse').hide();
  $('#demo').hide();
  $('#demo1').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container" ng-app="myApp" ng-controller="customersCtrl">
    <button type="button" class="btn btn-default" data-toggle="collapse" data-
    target="#demo" id="btn1" >Company Details</button>
      <button type="button" class="btn btn-default" data-toggle="collapse" data-
    target="#demo1" id="btn2">Commercial Details</button>
      <div id="demo" class="collapse" >
        1st div
      </div>

      <div id="demo1" class="collapse">
        2nd div
      </div>
    </div>

【讨论】：