как закрыть другие аккордеоны, когда на них нажимают, также Как скрыть описание при сокрытии родителя? - PullRequest
Новая
       4

как закрыть другие аккордеоны, когда на них нажимают, также Как скрыть описание при сокрытии родителя?

0 голосов
/ 16 октября 2018

enter image description here Я пытаюсь переключаться между аккордеонами;при нажатии одной кнопки другие аккордеоны должны быть закрыты, но это не работает. Пожалуйста, помогите мне.Существуют три типа существ: животные, птицы и насекомые, и среди них есть существа, такие как собака, кошка, павлин и т. Д., Когда я нажимаю, скажем, павлин, он открывает таблицу данных, как и предполагалось, однако, когда я нажимаю на следующее существо, скажем, Зимородок, он открывает таблицу и по-прежнему показывает старое выбранное существо.Описание всех существ показано вместе.И если я закрою Животных, то описание тоже должно скрыться.

<!DOCTYPE html>
<html>
<head>
  <title>Accordians</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
</script>
</head>
<body>
<style>
.panel-heading.active {
  color: green;
}

#collapseOne2{
	margin-left: 3%;
}
.panel-collapse{
	margin-left: 3%;
}


.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
   
}
.active:after {
    content: "\2212";
}

.creatures{
	padding: 7%;
}

.information{
	padding: 3%;
	margin-right: 3%;

}
</style>
<div class="container-fluid">
  <div class="border" style="padding: 1%;margin: 1%;">
    <div class="row">
      <div class="col-12 col-sm-11 col-md-4">
        <div class="border">
          <span class="input-group-text"><h4><b>Life Forms</b></h4></span>
          <div class="creatures">
          <div id="Animals" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingAnimals">
                <h3 class="panel-title">
                  <a class="accordion collapsed" data-toggle="collapse" data-parent="#Animals" href="#collapseAnimals"
                  aria-expanded="true" aria-controls="collapseAnimals">
                  Animals
                  </a>
                </h3>
              </div>
            </div>
              <div id="collapseAnimals" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAnimals">
                <div id="Dogs" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingDogs">
                      <h4 class="panel-title">
                        <a  accordion-id="#accordion" class="accordion collapsed" data-toggle="collapse" data-parent="#Dogs" href="#collapseDogs" aria-expanded="true" aria-controls="collapseDogs">
                          Dogs
                        </a>
                      </h4>
                    </div>
                  </div>
                      <!--End of Dogs Panel Heading -->
                    <div id="collapseDogs" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="headingDogs">
                      <div id="AlaskanMalamute" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingAlaskanMalamute">
                            <h5 class="panel-title">
                              <a class="collapsed" data-toggle="collapse"  data-parent="#AlaskanMalamute" href="#collapseAlaskanMalamute" aria-expanded="true" aria-controls="collapseAlaskanMalamute">
                                Alaskan Malamute
                            </a>
                            </h5>
                          </div>
                        </div>
                      </div>
                      <!-- End of Alaskan Malamute -->
                      <div id="Coonhound" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingCoonhound">
                            <h5 class="panel-title">
                               <a class="collapsed" data-toggle="collapse"  data-parent="#Coonhound" href="#collapseCoonhound" aria-expanded="true" aria-controls="collapseCoonhound">
                                American English Coonhound
                              </a>
                            </h5>
                          </div>
                        </div>
                      </div>
                      <!-- End of American English CoonHound -->
                    </div>
                    <!-- End of collapse Dogs -->
                </div>
                <!--End of Dogs -->

                <div id="Cats" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingCats">
                      <h4 class="panel-title">
                        <a class="accordion collapsed" data-toggle="collapse" data-parent="#Dogs" href="#collapseCats" aria-expanded="true" aria-controls="collapseCats">
                          Cats
                        </a>
                      </h4>
                    </div>
                  </div>
                      <!--End of Cats Panel Heading -->
                    <div id="collapseCats" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="headingCats">
                      <div id="Bengal" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingBengal">
                            <h5 class="panel-title">
                               <a class="collapsed" data-toggle="collapse"  data-parent="#Bengal" href="#collapseBengal" aria-expanded="true" aria-controls="collapseBengal">
                                Bengal
                            </a>
                            </h5>
                          </div>
                        </div>
                      </div>
                      <!-- End of Bengal -->
                      <div id="Bombay" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingBombay">
                            <h5 class="panel-title">
                               <a class="collapsed" data-toggle="collapse" data-parent="#Bombay" href="#collapseBombay" aria-expanded="true" aria-controls="collapseBombay">
                                Bombay
                              </a>
                            </h5>
                          </div>
                        </div>
                      </div>
                      <!-- End of Bombay -->
                    </div>
                    <!-- End of collapse Cats -->
                </div>
                <!--End of Cats -->

                <div id="Fishes" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingFishes">
                      <h4 class="panel-title">
                        <a class="accordion collapsed" data-toggle="collapse" data-parent="#Fishes" href="#collapseFishes" aria-expanded="true" aria-controls="collapseFishes">
                          Fishes
                        </a>
                      </h4>
                    </div>
                  </div>
                      <!--End of Fishes Panel Heading -->
                    <div id="collapseFishes" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="headingFishes">
                      <div id="CommonCarp" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingCommonCarp">
                            <h5 class="panel-title">
                              <a class="collapsed" data-toggle="collapse"  data-parent="#CommonCarp" href="#collapseCommonCarp" aria-expanded="true" aria-controls="collapseCommonCarp">
                                Common Carp
                            </a>
                            </h5>
                          </div>
                        </div>
                      </div>
                      <!-- End of Common Carp -->
                      <div id="GoldFish" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingGoldFish">
                            <h5 class="panel-title">
                               <a class="collapsed" data-toggle="collapse"  data-parent="#GoldFish" href="#collapseGoldFish" aria-expanded="true" aria-controls="collapseGoldFish">
                                Gold Fish
                              </a>
                            </h5>
                          </div>
                        </div>
                      </div>
                      <!-- End of Gold Fish -->
                    </div>
                    <!-- End of collapse Fishes -->
                </div>
                <!--End of Fishes -->
              </div>
               <!-- End of collapse Animals -->   
          </div>
          <!-- End of #Animals-->

          <div id="Birds" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingBirds">
                <h3 class="panel-title">
                  <a class="accordion collapsed" data-toggle="collapse" data-parent="#Birds" href="#collapseBirds" aria-expanded="true" aria-controls="collapseBirds">
                    Birds
                  </a>
                </h3>
              </div>
            </div>

            <div id="collapseBirds" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBirds">
              <div id="Peacock" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingPeacock">
                    <h4 class="panel-title">
                      <a class="accordion collapsed" data-toggle="collapse" data-parent="#Peacock" href="#collapsePeacock" aria-expanded="true" aria-controls="collapsePeacock">
                        Peacock
                      </a>
                    </h4>
                  </div>
                </div>
              
            <div id="collapsePeacock" class="panel-collapse collapse" role="tabpanel" aria-labelledby="        headingPeacock">
              <div id="AsianPeackock" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingAsianPeacock">
                    <h5 class="panel-title">
                       <a class="collapsed" data-toggle="collapse"  data-parent="#AsianPeackock" href="#collapseAsianPeacock" aria-expanded="true" aria-controls="collapseAsianPeacock">
                        Asian 
                      </a>
                    </h5>
                  </div>
                </div>
              </div>

              <div id="CongoPeacock" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingCongoPeacock">
                    <h5 class="panel-title">
                       <a class="collapsed" data-toggle="collapse"  data-parent="#CongoPeacock" href="#collapseCongoPeacock" aria-expanded="true" aria-controls="collapseCongoPeacock">
                       Congo 
                      </a>
                    </h5>
                  </div>
                </div>  
              </div>
              <!--End of Congo Peacock -->
            </div>
             <!--End of Collapse Peacock -->
             </div>
             <!--End of Peacock -->
            <div id="Kingfisher" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingKingfisher">
                  <h4 class="panel-title">
                    <a class="accordion collapsed" data-toggle="collapse" data-parent="#Kingfisher" href="#collapseKingfisher"
                      aria-expanded="true" aria-controls="collapseKingfisher">
                        Kingfisher
                    </a>
                  </h4>
                </div>
              </div>
            </div>
              <div id="collapseKingfisher" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingKingfisher">
                <div id="Pied" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingPied">
                      <h5 class="panel-title">
                        <a class="collapsed" data-toggle="collapse"  data-parent="#Pied" href="#collapsePied" aria-expanded="true"   aria-controls="collapsePied">
                          Pied 
                        </a>
                      </h5>
                    </div>
                  </div>
                </div>
              <div id="Collared" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingCollared">
                    <h5 class="panel-title">
                      <a class="collapsed" data-toggle="collapse"  data-parent="#Collared" href="#collapseCollared" 
                        aria-expanded="true" aria-controls="collapseCollared">
                        Collared 
                      </a>
                    </h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
            <!--End of Collapse Birds -->
        </div>
          <!--End of Birds -->

        <div id="Insects" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingInsects">
                <h3 class="panel-title">
                  <a class="accordion collapsed" data-toggle="collapse" data-parent="#Insects" href="#collapseInsects" aria-expanded="true" aria-controls="collapseInsects">
                   Insects
                  </a>
                </h3>
              </div>
            </div>

            <div id="collapseInsects" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingInsects">
              <div id="HoneyBee" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingHoneyBee">
                    <h4 class="panel-title">
                      <a class="accordion collapsed" data-toggle="collapse" data-parent="#HoneyBee" href="#collapseHoneyBee" aria-expanded="true" aria-controls="collapseHoneyBee">
                        HoneyBee
                      </a>
                    </h4>
                  </div>
                </div>
              
            <div id="collapseHoneyBee" class="panel-collapse collapse" role="tabpanel" aria-labelledby="        headingHoneyBee">
              <div id="AsianHoneyBee" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingAsianHoneyBee">
                    <h5 class="panel-title">
                       <a class="collapsed" data-toggle="collapse"  data-parent="#AsianHoneyBee" href="#collapseAsianHoneyBee" aria-expanded="true" aria-controls="collapseAsianHoneyBee">
                        Asian HoneyBee
                      </a>
                    </h5>
                  </div>
                </div>
              </div>

              <div id="RockHoneyBee" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingRockHoneyBee">
                    <h5 class="panel-title">
                       <a class="collapsed" data-toggle="collapse"  data-parent="#RockHoneyBee" href="#collapseRockHoneyBee" aria-expanded="true" aria-controls="collapseRockHoneyBee">
                        Rock HoneyBee
                      </a>
                    </h5>
                  </div>
                </div>  
              </div>
              <!--End of Rock HoneyBee -->
            </div>
             <!--End of Collapse Honey Bee -->
             </div>
             <!--End of Peacock -->
            <div id="Mosquito" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingMosquito">
                  <h4 class="panel-title">
                    <a class="accordion collapsed" data-toggle="collapse" data-parent="#Mosquito" 
                      href="#collapseMosquito"
                      aria-expanded="true" aria-controls="collapseMosquito">
                        Mosquito
                    </a>
                  </h4>
                </div>
              </div>
            </div>
              <div id="collapseMosquito" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingMosquito">
                <div id="Anophelies" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingAnophelies">
                      <h5 class="panel-title">
                        <a class="collapsed" data-toggle="collapse"  data-parent="#Anophelies" href="#collapseAnophelies" aria-expanded="true"   aria-controls="collapseAnophelies">
                          Anophelies 
                        </a>
                      </h5>
                    </div>
                  </div>
                </div>
              <div id="Culex" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingCulex">
                    <h5 class="panel-title">
                      <a class="collapsed" data-toggle="collapse"  data-parent="#Culex" href="#collapseCulex" 
                        aria-expanded="true" aria-controls="collapseCulex">
                        Culex 
                      </a>
                    </h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
            <!--End of collapsesects -->
        </div>
          <!--End of Insects -->
          </div>
        </div>
        <!--End of Inner Border -->
      </div>
      <!--End of Column -->
      <div class="col-12 col-sm-12 col-md-8">
        <div class="border">
          <span class="input-group-text"><h4><b>Description</b></h4></span>
          <div class= information>
            <div id="collapseDogs" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="headingDogs">
             <div class="table-responsive">
             <table class="table table-bordered">
                <tr>
                  <th>Name</th>
                  <th>Personality</th>
                  <th>Trainability</th> 
                  <th>Life Expectancy</th>
                </tr>
                <tr>
                  <td>Alaskan Malamute</td>
                  <td>Loyal,Affectionate</td>
                  <td>Independent</td>
                  <td>10-14 years</td>
                </tr>
                <tr>
                  <td>American English Coonhound</td>
                  <td>Social,Sweet, Mellow</td>
                  <td>Aggreable</td>
                  <td>11-12 years</td>
                </tr>
              </table>
            </div>
          </div>


           <div id="collapseCats" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="headingCats">
             <div class="table-responsive">
             <table class="table table-bordered">
              <tr>
                <th>Name</th>
                <th>Personality</th>
                <th>Trainability</th> 
                <th>Life Expectancy</th>
              </tr>

              <tr>
                <td>Bengal Cat</td>
                <td>Loyal,Affectionate</td>
                <td>Independent</td>
                <td>10-14 years</td>
              </tr>

              <tr>
                <td>Bombay Cat</td>
                <td>Social,Sweet, Mellow</td>
                <td>Aggreable</td>
                <td>11-12 years</td>
              </tr>

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

          <div id="collapseFishes" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="headingFishes">
             <div class="table-responsive">
             <table class="table table-bordered">

              <tr>
                <th>Name</th>
                <th>Personality</th>
                <th>Trainability</th> 
                <th>Life Expectancy</th>
              </tr>

              <tr>
                <td>CommonCarp</td>
                <td>Loyal,Affectionate</td>
                <td>Independent</td>
                <td>10-14 years</td>
              </tr>

               <tr>
                <td>GoldFish</td>
                <td>Social,Sweet, Mellow</td>
                <td>Aggreable</td>
                <td>11-12 years</td>
              </tr>
            </table>
          </div>
        </div>


          <div id="collapsePeacock" class="panel-collapse collapse" role="tabpanel" aria-labelledby="        headingPeacock">
             <div class="table-responsive">
             <table class="table table-bordered">
              <tr>
                <th>Name</th>
                <th>Personality</th>
                <th>skin Tone</th> 
                <th>Life Expectancy</th>
              </tr>
              <tr>
                <td>Asian Peacock</td>
                <td>Interactive</td>
                <td>Dark</td>
                <td>20-25 years</td>
              </tr>
               <tr>
                <td>Congo Peacock</td>
                <td>Shy</td>
                <td>Light</td>
                <td>10-15 years</td>
              </tr>
            </table>
          </div>
        </div>

        <div id="collapseKingfisher" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingKingfisher">
             <div class="table-responsive">
             <table class="table table-bordered">
              <tr>
                <th>Name</th>
                <th>Personality</th>
                <th>Hive Members</th> 
                <th>Life Expectancy</th>
              </tr>
              <tr>
                <td>Pied KingFisher</td>
                <td>Aggressive</td>
                <td>200-350</td>
                <td>2-3 years</td>
              </tr>

               <tr>
                <td>Collared KingFisher</td>
                <td>Aggressive</td>
                <td>250-350</td>
                <td>3-4 years</td>
              </tr>

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


           <div id="collapseHoneyBee" class="panel-collapse collapse" role="tabpanel" aria-labelledby="        headingHoneyBee">
             <div class="table-responsive">
             <table class="table table-bordered">
              <tr>
                <th>Name</th>
                <th>Personality</th>
                <th>Hive Members</th> 
                <th>Life Expectancy</th>
              </tr>

              <tr>
                <td>Asian HoneyBee</td>
                <td>Aggressive</td>
                <td>200-350</td>
                <td>2-3 years</td>
              </tr>

              <tr>
                <td>Rock HoneyBee</td>
                <td>Aggressive</td>
                <td>250-350</td>
                <td>3-4 years</td>
              </tr>
            </table>
          </div>
        </div>

          <div id="collapseMosquito" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingMosquito">
             <div class="table-responsive">
             <table class="table table-bordered">
              <tr>
                <th>Name</th>
                <th>Personality</th>
                <th>Hive Members</th> 
                <th>Life Expectancy</th>
              </tr>

              <tr>
                <td>Anopheles</td>
                <td>Aggressive</td>
                <td>200-350</td>
                <td>2-3 years</td>
              </tr>

              <tr>
                <td>Culex</td>
                <td>Aggressive</td>
                <td>250-350</td>
                <td>3-4 years</td>
              </tr>
            </table>
          </div>
        </div>

        </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
$(document).ready(function(){
var acc = $(".accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}     
});
</script>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 16 октября 2018 
take it as example

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 .bs-example{
        margin: 20px;
          background-color: rgba(215,215,215,1);
          padding: 1em;
    }
<div class="bs-example">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <h4 class="panel-title">
                   Quesiton 1
                </h4></a>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt ipsum eget nisl accumsan, eu cursus tellus bibendum. Nam et ipsum scelerisque dolor consequat tempor vel vel tortor.</p>
                    <p>Ut finibus facilisis lacus, sit amet porttitor enim mollis sed. Nunc orci magna, iaculis sit amet magna non, tincidunt varius sem.</p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <h4 class="panel-title">
                  Question Two
                </h4></a>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt ipsum eget nisl accumsan, eu cursus tellus bibendum. Nam et ipsum scelerisque dolor consequat tempor vel vel tortor.</p>
                    <p>Ut finibus facilisis lacus, sit amet porttitor enim mollis sed. Nunc orci magna, iaculis sit amet magna non, tincidunt varius sem.</p>
                </div>
            </div>
        </div>
       <div class="panel panel-default">
            <div class="panel-heading">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <h4 class="panel-title">
                  Question Three
                </h4></a>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt ipsum eget nisl accumsan, eu cursus tellus bibendum. Nam et ipsum scelerisque dolor consequat tempor vel vel tortor.</p>
                    <p>Ut finibus facilisis lacus, sit amet porttitor enim mollis sed. Nunc orci magna, iaculis sit amet magna non, tincidunt varius sem.</p>
                </div>
            </div>
        </div>
            </div>


    </div>

</body>
</html>
0 голосов
/ 16 октября 2018

Пожалуйста, попробуйте ниже код 

<script>
$(document).ready(function(){
  var acc = $(".accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
    $(".panel-collapse").removeClass("show");
    $(".panel-heading .panel-title .accordion").removeClass("active");
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } 
      else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      } 
    });
  } 
});
</script>
0 голосов
/ 16 октября 2018

Я обновил ваш код, вам нужно добавить data-parent="#panels" в collapse div и id="panel" в main panel-group div

<!DOCTYPE html>
<html>
<head>
  <title>Accordians</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
</script>
</head>
<body>
<style>
.panel-heading.active {
  color: green;
}

#collapseOne2{
	margin-left: 3%;
}
.panel-collapse{
	margin-left: 3%;
}


.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
   
}
.active:after {
    content: "\2212";
}

.creatures{
	padding: 7%;
}

.information{
	padding: 3%;
	margin-right: 3%;

}
</style>
<div class="container-fluid">
  <div class="border" style="padding: 1%;margin: 1%;">
    <div class="row">
      <div class="col-12 col-sm-11 col-md-4">
	   <div class="panel-group" id="panels">
        <div class="border">
          <span class="input-group-text"><h4><b>Life Forms</b></h4></span>
          <div class="creatures">
          <div id="Animals" role="tablist" aria-multiselectable="true" >
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingAnimals">
                <h3 class="panel-title">
                  <a class="accordion collapsed" data-toggle="collapse" data-parent="#Animals" href="#collapseAnimals"
                  aria-expanded="true" aria-controls="collapseAnimals">
                  Animals
                  </a>
                </h3>
              </div>
            </div>
              <div id="collapseAnimals" class="panel-collapse collapse" data-parent="#panels" role="tabpanel" aria-labelledby="headingAnimals">
                <div id="Dogs" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingDogs">
                      <h4 class="panel-title">
                        <a  accordion-id="#accordion" class="accordion collapsed" data-toggle="collapse" data-parent="#Dogs" href="#collapseDogs" aria-expanded="true" aria-controls="collapseDogs">
                          Dogs
                        </a>
                      </h4>
                    </div>
                  </div>
                      <!--End of Dogs Panel Heading -->
                    <div id="collapseDogs" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="headingDogs">
                      <div id="AlaskanMalamute" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingAlaskanMalamute">
                            <h5 class="panel-title">
                              <a class="collapsed" data-toggle="collapse"  data-parent="#AlaskanMalamute" href="#collapseAlaskanMalamute" aria-expanded="true" aria-controls="collapseAlaskanMalamute">
                                Alaskan Malamute
                            </a>
                            </h5>
                          </div>
                        </div>
                      </div>
                      <!-- End of Alaskan Malamute -->
                      <div id="Coonhound" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingCoonhound">
                            <h5 class="panel-title">
                               <a class="collapsed" data-toggle="collapse"  data-parent="#Coonhound" href="#collapseCoonhound" aria-expanded="true" aria-controls="collapseCoonhound">
                                American English Coonhound
                              </a>
                            </h5>
                          </div>
                        </div>
                      </div>
                      <!-- End of American English CoonHound -->
                    </div>
                    <!-- End of collapse Dogs -->
                </div>
                <!--End of Dogs -->

                <div id="Cats" role="tablist" aria-multiselectable="true" >
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingCats">
                      <h4 class="panel-title">
                        <a class="accordion collapsed" data-toggle="collapse" data-parent="#Dogs" href="#collapseCats" aria-expanded="true" aria-controls="collapseCats">
                          Cats
                        </a>
                      </h4>
                    </div>
                  </div>
                      <!--End of Cats Panel Heading -->
                    <div id="collapseCats" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="headingCats">
                      <div id="Bengal" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingBengal">
                            <h5 class="panel-title">
                               <a class="collapsed" data-toggle="collapse"  data-parent="#Bengal" href="#collapseBengal" aria-expanded="true" aria-controls="collapseBengal">
                                Bengal
                            </a>
                            </h5>
                          </div>
                        </div>
                      </div>
                      <!-- End of Bengal -->
                      <div id="Bombay" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingBombay">
                            <h5 class="panel-title">
                               <a class="collapsed" data-toggle="collapse" data-parent="#Bombay" href="#collapseBombay" aria-expanded="true" aria-controls="collapseBombay">
                                Bombay
                              </a>
                            </h5>
                          </div>
                        </div>
                      </div>
                      <!-- End of Bombay -->
                    </div>
                    <!-- End of collapse Cats -->
                </div>
                <!--End of Cats -->

                <div id="Fishes" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingFishes">
                      <h4 class="panel-title">
                        <a class="accordion collapsed" data-toggle="collapse" data-parent="#Fishes" href="#collapseFishes" aria-expanded="true" aria-controls="collapseFishes">
                          Fishes
                        </a>
                      </h4>
                    </div>
                  </div>
                      <!--End of Fishes Panel Heading -->
                    <div id="collapseFishes" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="headingFishes">
                      <div id="CommonCarp" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingCommonCarp">
                            <h5 class="panel-title">
                              <a class="collapsed" data-toggle="collapse"  data-parent="#CommonCarp" href="#collapseCommonCarp" aria-expanded="true" aria-controls="collapseCommonCarp">
                                Common Carp
                            </a>
                            </h5>
                          </div>
                        </div>
                      </div>
                      <!-- End of Common Carp -->
                      <div id="GoldFish" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingGoldFish">
                            <h5 class="panel-title">
                               <a class="collapsed" data-toggle="collapse"  data-parent="#GoldFish" href="#collapseGoldFish" aria-expanded="true" aria-controls="collapseGoldFish">
                                Gold Fish
                              </a>
                            </h5>
                          </div>
                        </div>
                      </div>
                      <!-- End of Gold Fish -->
                    </div>
                    <!-- End of collapse Fishes -->
                </div>
                <!--End of Fishes -->
              </div>
               <!-- End of collapse Animals -->   
          </div>
          <!-- End of #Animals-->

          <div id="Birds" role="tablist" aria-multiselectable="true" >
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingBirds">
                <h3 class="panel-title">
                  <a class="accordion collapsed" data-toggle="collapse" data-parent="#panels" data-parent="#Birds" href="#collapseBirds" aria-expanded="true" aria-controls="collapseBirds">
                    Birds
                  </a>
                </h3>
              </div>
            </div>

            <div id="collapseBirds" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBirds">
              <div id="Peacock" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingPeacock">
                    <h4 class="panel-title">
                      <a class="accordion collapsed" data-toggle="collapse" data-parent="#Peacock" href="#collapsePeacock" aria-expanded="true" aria-controls="collapsePeacock">
                        Peacock
                      </a>
                    </h4>
                  </div>
                </div>
              
            <div id="collapsePeacock" class="panel-collapse collapse" role="tabpanel" aria-labelledby="        headingPeacock">
              <div id="AsianPeackock" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingAsianPeacock">
                    <h5 class="panel-title">
                       <a class="collapsed" data-toggle="collapse"  data-parent="#AsianPeackock" href="#collapseAsianPeacock" aria-expanded="true" aria-controls="collapseAsianPeacock">
                        Asian 
                      </a>
                    </h5>
                  </div>
                </div>
              </div>

              <div id="CongoPeacock" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingCongoPeacock">
                    <h5 class="panel-title">
                       <a class="collapsed" data-toggle="collapse"  data-parent="#CongoPeacock" href="#collapseCongoPeacock" aria-expanded="true" aria-controls="collapseCongoPeacock">
                       Congo 
                      </a>
                    </h5>
                  </div>
                </div>  
              </div>
              <!--End of Congo Peacock -->
            </div>
             <!--End of Collapse Peacock -->
             </div>
             <!--End of Peacock -->
            <div id="Kingfisher" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingKingfisher">
                  <h4 class="panel-title">
                    <a class="accordion collapsed" data-toggle="collapse" data-parent="#Kingfisher" href="#collapseKingfisher"
                      aria-expanded="true" aria-controls="collapseKingfisher">
                        Kingfisher
                    </a>
                  </h4>
                </div>
              </div>
            </div>
              <div id="collapseKingfisher" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingKingfisher">
                <div id="Pied" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingPied">
                      <h5 class="panel-title">
                        <a class="collapsed" data-toggle="collapse"  data-parent="#Pied" href="#collapsePied" aria-expanded="true"   aria-controls="collapsePied">
                          Pied 
                        </a>
                      </h5>
                    </div>
                  </div>
                </div>
              <div id="Collared" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingCollared">
                    <h5 class="panel-title">
                      <a class="collapsed" data-toggle="collapse"  data-parent="#Collared" href="#collapseCollared" 
                        aria-expanded="true" aria-controls="collapseCollared">
                        Collared 
                      </a>
                    </h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
            <!--End of Collapse Birds -->
        </div>
          <!--End of Birds -->

        <div id="Insects" role="tablist" aria-multiselectable="true" >
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingInsects">
                <h3 class="panel-title">
                  <a class="accordion collapsed" data-toggle="collapse" data-parent="#Insects" href="#collapseInsects" aria-expanded="true" aria-controls="collapseInsects">
                   Insects
                  </a>
                </h3>
              </div>
            </div>

            <div id="collapseInsects" class="panel-collapse collapse "  data-parent="#panels" role="tabpanel" aria-labelledby="headingInsects">
              <div id="HoneyBee" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingHoneyBee">
                    <h4 class="panel-title">
                      <a class="accordion collapsed" data-toggle="collapse" data-parent="#HoneyBee" href="#collapseHoneyBee" aria-expanded="true" aria-controls="collapseHoneyBee">
                        HoneyBee
                      </a>
                    </h4>
                  </div>
                </div>
              
            <div id="collapseHoneyBee" class="panel-collapse collapse" role="tabpanel" aria-labelledby="        headingHoneyBee">
              <div id="AsianHoneyBee" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingAsianHoneyBee">
                    <h5 class="panel-title">
                       <a class="collapsed" data-toggle="collapse"  data-parent="#AsianHoneyBee" href="#collapseAsianHoneyBee" aria-expanded="true" aria-controls="collapseAsianHoneyBee">
                        Asian HoneyBee
                      </a>
                    </h5>
                  </div>
                </div>
              </div>

              <div id="RockHoneyBee" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingRockHoneyBee">
                    <h5 class="panel-title">
                       <a class="collapsed" data-toggle="collapse"  data-parent="#RockHoneyBee" href="#collapseRockHoneyBee" aria-expanded="true" aria-controls="collapseRockHoneyBee">
                        Rock HoneyBee
                      </a>
                    </h5>
                  </div>
                </div>  
              </div>
              <!--End of Rock HoneyBee -->
            </div>
             <!--End of Collapse Honey Bee -->
             </div>
             <!--End of Peacock -->
            <div id="Mosquito" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingMosquito">
                  <h4 class="panel-title">
                    <a class="accordion collapsed" data-toggle="collapse" data-parent="#Mosquito" 
                      href="#collapseMosquito"
                      aria-expanded="true" aria-controls="collapseMosquito">
                        Mosquito
                    </a>
                  </h4>
                </div>
              </div>
            </div>
              <div id="collapseMosquito" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingMosquito">
                <div id="Anophelies" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingAnophelies">
                      <h5 class="panel-title">
                        <a class="collapsed" data-toggle="collapse"  data-parent="#Anophelies" href="#collapseAnophelies" aria-expanded="true"   aria-controls="collapseAnophelies">
                          Anophelies 
                        </a>
                      </h5>
                    </div>
                  </div>
                </div>
              <div id="Culex" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingCulex">
                    <h5 class="panel-title">
                      <a class="collapsed" data-toggle="collapse"  data-parent="#Culex" href="#collapseCulex" 
                        aria-expanded="true" aria-controls="collapseCulex">
                        Culex 
                      </a>
                    </h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
		    </div>
            <!--End of collapsesects -->
        </div>
          <!--End of Insects -->
          </div>
        </div>
        <!--End of Inner Border -->
      </div>
      <!--End of Column -->
      <div class="col-12 col-sm-12 col-md-8">
        <div class="border">
          <span class="input-group-text"><h4><b>Description</b></h4></span>
          <div class= information>
            <div id="collapseDogs" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="headingDogs">
             <div class="table-responsive">
             <table class="table table-bordered">
                <tr>
                  <th>Name</th>
                  <th>Personality</th>
                  <th>Trainability</th> 
                  <th>Life Expectancy</th>
                </tr>
                <tr>
                  <td>Alaskan Malamute</td>
                  <td>Loyal,Affectionate</td>
                  <td>Independent</td>
                  <td>10-14 years</td>
                </tr>
                <tr>
                  <td>American English Coonhound</td>
                  <td>Social,Sweet, Mellow</td>
                  <td>Aggreable</td>
                  <td>11-12 years</td>
                </tr>
              </table>
            </div>
          </div>


           <div id="collapseCats" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="headingCats">
             <div class="table-responsive">
             <table class="table table-bordered">
              <tr>
                <th>Name</th>
                <th>Personality</th>
                <th>Trainability</th> 
                <th>Life Expectancy</th>
              </tr>

              <tr>
                <td>Bengal Cat</td>
                <td>Loyal,Affectionate</td>
                <td>Independent</td>
                <td>10-14 years</td>
              </tr>

              <tr>
                <td>Bombay Cat</td>
                <td>Social,Sweet, Mellow</td>
                <td>Aggreable</td>
                <td>11-12 years</td>
              </tr>

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

          <div id="collapseFishes" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="headingFishes">
             <div class="table-responsive">
             <table class="table table-bordered">

              <tr>
                <th>Name</th>
                <th>Personality</th>
                <th>Trainability</th> 
                <th>Life Expectancy</th>
              </tr>

              <tr>
                <td>CommonCarp</td>
                <td>Loyal,Affectionate</td>
                <td>Independent</td>
                <td>10-14 years</td>
              </tr>

               <tr>
                <td>GoldFish</td>
                <td>Social,Sweet, Mellow</td>
                <td>Aggreable</td>
                <td>11-12 years</td>
              </tr>
            </table>
          </div>
        </div>


          <div id="collapsePeacock" class="panel-collapse collapse" role="tabpanel" aria-labelledby="        headingPeacock">
             <div class="table-responsive">
             <table class="table table-bordered">
              <tr>
                <th>Name</th>
                <th>Personality</th>
                <th>skin Tone</th> 
                <th>Life Expectancy</th>
              </tr>
              <tr>
                <td>Asian Peacock</td>
                <td>Interactive</td>
                <td>Dark</td>
                <td>20-25 years</td>
              </tr>
               <tr>
                <td>Congo Peacock</td>
                <td>Shy</td>
                <td>Light</td>
                <td>10-15 years</td>
              </tr>
            </table>
          </div>
        </div>

        <div id="collapseKingfisher" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingKingfisher">
             <div class="table-responsive">
             <table class="table table-bordered">
              <tr>
                <th>Name</th>
                <th>Personality</th>
                <th>Hive Members</th> 
                <th>Life Expectancy</th>
              </tr>
              <tr>
                <td>Pied KingFisher</td>
                <td>Aggressive</td>
                <td>200-350</td>
                <td>2-3 years</td>
              </tr>

               <tr>
                <td>Collared KingFisher</td>
                <td>Aggressive</td>
                <td>250-350</td>
                <td>3-4 years</td>
              </tr>

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


           <div id="collapseHoneyBee" class="panel-collapse collapse" role="tabpanel" aria-labelledby="        headingHoneyBee">
             <div class="table-responsive">
             <table class="table table-bordered">
              <tr>
                <th>Name</th>
                <th>Personality</th>
                <th>Hive Members</th> 
                <th>Life Expectancy</th>
              </tr>

              <tr>
                <td>Asian HoneyBee</td>
                <td>Aggressive</td>
                <td>200-350</td>
                <td>2-3 years</td>
              </tr>

              <tr>
                <td>Rock HoneyBee</td>
                <td>Aggressive</td>
                <td>250-350</td>
                <td>3-4 years</td>
              </tr>
            </table>
          </div>
        </div>

          <div id="collapseMosquito" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingMosquito">
             <div class="table-responsive">
             <table class="table table-bordered">
              <tr>
                <th>Name</th>
                <th>Personality</th>
                <th>Hive Members</th> 
                <th>Life Expectancy</th>
              </tr>

              <tr>
                <td>Anopheles</td>
                <td>Aggressive</td>
                <td>200-350</td>
                <td>2-3 years</td>
              </tr>

              <tr>
                <td>Culex</td>
                <td>Aggressive</td>
                <td>250-350</td>
                <td>3-4 years</td>
              </tr>
            </table>
          </div>
        </div>

        </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
$(document).ready(function(){
var acc = $(".accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}     
});
</script>
</body>
</html>

PS скопируйте этот код и проверьте ваш местный

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...