ブートストラップが自動的に折りたたまれます

Question

私は次のコードにブートストラップの折りたたみを使用しています。

.downloadmenu { 
 
    width:500px; 
 
    background-color:#7FFFD4; 
 
    margin:0 auto; 
 
    text-align:center; 
 
padding:60px; 
 
    height: auto; 
 

 
} 
 

 
.clear { 
 
    clear:both; 
 
} 
 
span { 
 
    background-color:red; 
 
    padding:15px; 
 
    border-radius:10px; 
 
    float:right; 
 
    margin:10px; 
 
} 
 

 
span:hover { 
 
    cursor: pointer; 
 
    background-color:yellow; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="downloadmenu"> 
 

 
<span data-toggle="collapse" data-target="#FireFoxCol">FireFox</span> 
 
<span data-toggle="collapse" data-target="#ChromeCol">Chrome</span> 
 
<span data-toggle="collapse" data-target="#OperaCol">Opera</span> 
 
<span data-toggle="collapse" data-target="#SafariCol">Safari</span> 
 

 
<div class="clear"></div> 
 

 
<div class="well well-sm collapse" id="FireFoxCol"> 
 
<b>Downloding FireFox...</b><br/> 
 
<a href="...">-Download For Windows</a><br/> 
 
<a href="...">-Download For Linux</a> 
 
</div> 
 

 
<div class="well well-sm collapse" id="ChromeCol"> 
 
<b>Downloding Chrome...</b><br/> 
 
<a href="...">-Download For Android</a><br/> 
 
<a href="...">-Download For BlackBerry</a> 
 
</div> 
 

 
<div class="well well-sm collapse" id="OperaCol"> 
 
<b>Downloding Opera...</b><br/> 
 
<a href="...">-Download For Mac</a><br/> 
 
<a href="...">-Download For IOS</a> 
 
</div> 
 

 
<div class="well well-sm collapse" id="SafariCol"> 
 
<b>Downloding Safari...</b><br/> 
 
<a href="...">-Download For Windows Phone</a><br/> 
 
<a href="...">-Download For Java</a> 
 
</div> 
 

 
</div>

あなたは、Firefoxをクリックすると、それはDIVを示しています。

たとえば、Safariのをクリックすると、別のdivが表示されます。

divが崩壊（FireFoxなど）して別のもの（Safariなど）をクリックすると、現在のFireFoxのdivが折りたたまれ、Safariのdivが折りたたまれます。それは単なる例です。

どうすればいいですか？ https://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

Answer 1

あなたが「アコーディオン」と呼ばれたい行動を、そしてそれがbuilt in to Bootstrapです：

また、これをチェックすることができます。 data-toggle="collapse"には、一度に開くことができる折りたたみアイテムは1つしかありません。折り畳み可能な各アイテムは同じ親を共有します。この場合はdata-parent=".downloadmenu"です。他の事は親のの直接の子は、

<div class="downloadmenu"> 
    <div class="panel"> 
     <span data-toggle="collapse" data-parent=".downloadmenu" data-target="#FireFoxCol">FireFox</span> 
     <span data-toggle="collapse" data-parent=".downloadmenu" data-target="#ChromeCol">Chrome</span> 
     <span data-toggle="collapse" data-parent=".downloadmenu" data-target="#OperaCol">Opera</span> 
     <span data-toggle="collapse" data-parent=".downloadmenu" data-target="#SafariCol">Safari</span> 

     <div class="clearfix"></div> 

     <div class="well well-sm collapse" id="FireFoxCol"> 
      <b>Downloding FireFox...</b> 

     </div> 

     <div class="well well-sm collapse" id="ChromeCol"> 
      <b>Downloding Chrome...</b> 

     </div> 

     <div class="well well-sm collapse" id="OperaCol"> 
      <b>Downloding Opera...</b> 

     </div> 

     <div class="well well-sm collapse" id="SafariCol"> 
      <b>Downloding Safari...</b> 

     </div> 
    </div> 
</div> 

Demo on Codeply

... .panelクラスでなければならないということです