Charles Charles - 1 month ago 9
CSS Question

Bootstrap accordian behaving weird

The product specs portion is behaving correctly. When i click on group 1 it shows, the when i click on group 2 it will minimize group 1 and show group 2.

The problem is the next two categories, Usage and Installation and Care aren't doing the hole accordion thing. If i click on group 1 and then group 2 it maximizes both, it wont minimize group 1 like ti should.

<div class="tab-content">
<!--Product Specs-->
<hr>
<h3 style="text-align: left;">Product Specs</h3>
<div id="home" class="tab-pane fade in active ">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOneSpecs" aria-expanded="false" aria-controls="collapseOneSpecs">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOneSpecs" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Group #1 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoSpecs" aria-expanded="false" aria-controls="collapseTwoSpecs">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwoSpecs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Group #2 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThreeSpecs" aria-expanded="false" aria-controls="collapseThreeSpecs">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThreeSpecs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Group #3 information
</div>
</div>
</div>
</div>
</div>
<!--END of Product Specs

<!--Usage-->
<hr>
<h3 style="text-align: left;">Usage</h3>
<div id="home" class="tab-pane fade in active ">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOneUsage" aria-expanded="false" aria-controls="collapseOneUsage">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOneUsage" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneUsage">
<div class="panel-body">
Group #1 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoUsage" aria-expanded="false" aria-controls="collapseTwoUsage">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwoUsage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoUsage">
<div class="panel-body">
Group #2 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThreeUsage" aria-expanded="false" aria-controls="collapseThreeUsage">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThreeUsage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeUsage">
<div class="panel-body">
Group #3 information
</div>
</div>
</div>
</div>
</div>
<!--End of Usage-->

<!--Installation and care-->
<hr>
<h3 style="text-align: left;">Installation & Care</h3>
<div id="home" class="tab-pane fade in active ">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOneCare" aria-expanded="false" aria-controls="collapseOneCare">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOneCare" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneCare">
<div class="panel-body">
Group #1 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoCare" aria-expanded="false" aria-controls="collapseTwoCare">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwoCare" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoCare">
<div class="panel-body">
Group #2 information
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThreeCare" aria-expanded="false" aria-controls="collapseThreeCare">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThreeCare" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeCare">
<div class="panel-body">
Group #3 information
</div>
</div>
</div>
</div>
</div>
<!--END of Installation & Care-->


When i click on anything in group 2 and three. It will minimize group 1?

jfiddle Link jfiddle link

Answer

Try this

<div class="tab-content">
                            <!--Product Specs-->
                            <hr>
                            <h3 style="text-align: left;">Product Specs</h3>
                            <div id="home" class="tab-pane fade in active ">
                                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                  <div class="panel panel-info">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                      <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOneSpecs" aria-expanded="false" aria-controls="collapseOneSpecs">
                                          Collapsible Group Item #1
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseOneSpecs" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                      <div class="panel-body">
                                        Group #1 information
                                      </div>
                                    </div>
                                  </div>
                                  <div class="panel panel-info">
                                    <div class="panel-heading" role="tab" id="headingTwo">
                                      <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoSpecs" aria-expanded="false" aria-controls="collapseTwoSpecs">
                                          Collapsible Group Item #2
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseTwoSpecs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                      <div class="panel-body">
                                        Group #2 information
                                      </div>
                                    </div>
                                  </div>
                                  <div class="panel panel-info">
                                    <div class="panel-heading" role="tab" id="headingThree">
                                      <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThreeSpecs" aria-expanded="false" aria-controls="collapseThreeSpecs">
                                          Collapsible Group Item #3
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseThreeSpecs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                                      <div class="panel-body">
                                        Group #3 information
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            </div>
                            <!--END of Product Specs

                            <!--Usage-->
                            <hr>
                            <h3 style="text-align: left;">Usage</h3>
                            <div id="home" class="tab-pane fade in active ">
                                <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
                                  <div class="panel panel-info">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                      <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOneUsage" aria-expanded="false" aria-controls="collapseOneUsage">
                                          Collapsible Group Item #1
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseOneUsage" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneUsage">
                                      <div class="panel-body">
                                        Group #1 information
                                      </div>
                                    </div>
                                  </div>
                                  <div class="panel panel-info">
                                    <div class="panel-heading" role="tab" id="headingTwo">
                                      <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwoUsage" aria-expanded="false" aria-controls="collapseTwoUsage">
                                          Collapsible Group Item #2
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseTwoUsage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoUsage">
                                      <div class="panel-body">
                                        Group #2 information
                                      </div>
                                    </div>
                                  </div>
                                  <div class="panel panel-info">
                                    <div class="panel-heading" role="tab" id="headingThree">
                                      <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseThreeUsage" aria-expanded="false" aria-controls="collapseThreeUsage">
                                          Collapsible Group Item #3
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseThreeUsage" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeUsage">
                                      <div class="panel-body">
                                        Group #3 information
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            </div>
                            <!--End of Usage-->

                            <!--Installation and care-->
                            <hr>
                            <h3 style="text-align: left;">Installation & Care</h3>
                            <div id="home" class="tab-pane fade in active ">
                                <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
                                  <div class="panel panel-info">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                      <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneCare" aria-expanded="false" aria-controls="collapseOneCare">
                                          Collapsible Group Item #1
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseOneCare" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneCare">
                                      <div class="panel-body">
                                        Group #1 information
                                      </div>
                                    </div>
                                  </div>
                                  <div class="panel panel-info">
                                    <div class="panel-heading" role="tab" id="headingTwo">
                                      <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwoCare" aria-expanded="false" aria-controls="collapseTwoCare">
                                          Collapsible Group Item #2
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseTwoCare" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwoCare">
                                      <div class="panel-body">
                                        Group #2 information
                                      </div>
                                    </div>
                                  </div>
                                  <div class="panel panel-info">
                                    <div class="panel-heading" role="tab" id="headingThree">
                                      <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeCare" aria-expanded="false" aria-controls="collapseThreeCare">
                                          Collapsible Group Item #3
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseThreeCare" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThreeCare">
                                      <div class="panel-body">
                                        Group #3 information
                                      </div>
                                    </div>
                                  </div>
                                </div>
                            </div>
       

	   <!--END of Installation & Care-->

Comments