ブートストラップ折りたたみアコーディオン1パネルが開いている、他のすべてが閉じている

Question

2つのブートストラップアコーディオンを作成しました。私はそれらをすべて1つのアコーディオンにしていたときにパネルがぎこちない場所を移動していたのが好きではなかったので、2つの別々のアコーディオンを作りました。そうすることで、各アコーディオンは私が望むように動作します。アコーディオンごとに一度に1つのパネルボディしか開くことはできませんが、1つのパネルボディを開くことができます。

どういう意味ですか... 現在、上部と下部の両方の列に1つのパネル本体を開くことができます。私は、あなたが一度に1つを開くことができるようにしてほしい。

これは可能ですか？ここで

は、私がここで https://codepen.io/aahmed2/pen/yOQvVz

が私のコードで作られたものの一例です。

<div class="row"> 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 

    <div class="panel panel-default col-md-4"> 
     <div class="panel-heading bites-stings" role="tab" id="headingSeven"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> 
       <h2>Bites and Stings</h2> 
      </a> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a> 
       <a href="health-resources/ticks.html"><h4>Ticks</h4></a> 
       <a href="#"><h4>Bees and Wasps</h4></a> 
       <a href="#"><h4>Animal Bites</h4></a> 
      </div> 
     </div> 
    </div> 


    <div class="panel panel-default col-md-4"> 
     <div class="panel-heading pet-health" role="tab" id="headingTwo"> 
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
       <h2>Pet Health and Safety</h2> 
      </a> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body"> 
       <a href="#"><h4>Pet Allergies</h4></a> 
       <a href="#"><h4>Toxic Plants</h4></a> 
       <a href="#"><h4>Pet and Wildlife Encounters</h4></a> 
      </div> 
     </div> 
    </div> 


    <div class="panel panel-default col-md-4"> 
     <div class="panel-heading livestock-health" role="tab" id="headingThree"> 
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
       <h2>Livestock Health and Safety</h2> 
      </a> 
     </div> 
     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
      <div class="panel-body"> 
       <a href="#"><h4>This is a Topic</h4></a> 
       <a href="#"><h4>Topic 2</h4></a> 
       <a href="#"><h4>Another Topic</h4></a> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

<div class="row"> 
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default col-md-4"> 
     <div class="panel-heading zoonotic" role="tab" id="headingFour"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour"> 
       <h2>Zoonotic Diseases</h2> 
      </a> 
     </div> 
     <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> 
      <div class="panel-body"> 
       <a href="#"><h4>Bacterial</h4></a> 
       <a href="#"><h4>Fungal</h4></a> 
       <a href="#"><h4>Parasitic</h4></a> 
       <a href="#"><h4>Prionotic</h4></a> 
       <a href="#"><h4>Rickettsial</h4></a> 
       <a href="#"><h4>Spirochetes</h4></a> 
       <a href="#"><h4>Viral</h4></a> 
      </div> 
     </div> 
    </div> 


    <div class="panel panel-default col-md-4"> 
     <div class="panel-heading allergies" role="tab" id="headingFive"> 
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> 
       <h2>Allergies</h2> 
      </a> 
     </div> 
     <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> 
      <div class="panel-body"> 
       <a href="#"><h4>Animal Allergies</h4></a> 
       <a href="#"><h4>Environmental Allergies</h4></a> 
      </div> 
     </div> 
    </div> 


    <div class="panel panel-default col-md-4"> 
     <div class="panel-heading environment-health" role="tab" id="headingSix"> 
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix"> 
       <h2>Environmental Health</h2> 
      </a> 
     </div> 
     <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix"> 
      <div class="panel-body"> 
       <a href="#"><h4>This is a Topic</h4></a> 
       <a href="#"><h4>Topic 2</h4></a> 
       <a href="#"><h4>Another Topic</h4></a> 
      </div> 
     </div> 
    </div> 


</div><!--/collapse--> 
</div> 
</div> 

Answer 1

あなただけdata-parentを結合する必要があり、同時に複数のアコーディオンつだけオープンを持っています。だから私はcodepenを作ってそれが動作するのを見ました。

私はちょうどdata-parent="#accordion,#accordion2"

<div class="row"> 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 

    <div class="panel panel-default col-md-4"> 
     <div class="panel-heading bites-stings" role="tab" id="headingSeven"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> 
       <h2>Bites and Stings</h2> 
      </a> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a> 
       <a href="health-resources/ticks.html"><h4>Ticks</h4></a> 
       <a href="#"><h4>Bees and Wasps</h4></a> 
       <a href="#"><h4>Animal Bites</h4></a> 
      </div> 
     </div> 
    </div> 


    <div class="panel panel-default col-md-4"> 
     <div class="panel-heading pet-health" role="tab" id="headingTwo"> 
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
       <h2>Pet Health and Safety</h2> 
      </a> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body"> 
       <a href="#"><h4>Pet Allergies</h4></a> 
       <a href="#"><h4>Toxic Plants</h4></a> 
       <a href="#"><h4>Pet and Wildlife Encounters</h4></a> 
      </div> 
     </div> 
    </div> 


    <div class="panel panel-default col-md-4"> 
     <div class="panel-heading livestock-health" role="tab" id="headingThree"> 
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
       <h2>Livestock Health and Safety</h2> 
      </a> 
     </div> 
     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
      <div class="panel-body"> 
       <a href="#"><h4>This is a Topic</h4></a> 
       <a href="#"><h4>Topic 2</h4></a> 
       <a href="#"><h4>Another Topic</h4></a> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

<div class="row"> 
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default col-md-4"> 
     <div class="panel-heading zoonotic" role="tab" id="headingFour"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour"> 
       <h2>Zoonotic Diseases</h2> 
      </a> 
     </div> 
     <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> 
      <div class="panel-body"> 
       <a href="#"><h4>Bacterial</h4></a> 
       <a href="#"><h4>Fungal</h4></a> 
       <a href="#"><h4>Parasitic</h4></a> 
       <a href="#"><h4>Prionotic</h4></a> 
       <a href="#"><h4>Rickettsial</h4></a> 
       <a href="#"><h4>Spirochetes</h4></a> 
       <a href="#"><h4>Viral</h4></a> 
      </div> 
     </div> 
    </div> 


    <div class="panel panel-default col-md-4"> 
     <div class="panel-heading allergies" role="tab" id="headingFive"> 
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> 
       <h2>Allergies</h2> 
      </a> 
     </div> 
     <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> 
      <div class="panel-body"> 
       <a href="#"><h4>Animal Allergies</h4></a> 
       <a href="#"><h4>Environmental Allergies</h4></a> 
      </div> 
     </div> 
    </div> 


    <div class="panel panel-default col-md-4"> 
     <div class="panel-heading environment-health" role="tab" id="headingSix"> 
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix"> 
       <h2>Environmental Health</h2> 
      </a> 
     </div> 
     <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix"> 
      <div class="panel-body"> 
       <a href="#"><h4>This is a Topic</h4></a> 
       <a href="#"><h4>Topic 2</h4></a> 
       <a href="#"><h4>Another Topic</h4></a> 
      </div> 
     </div> 
    </div> 


</div><!--/collapse--> 

</div>