Collapseable Accordion in another Accordion

-1

Вы знаете этот эффект в бутстрапе? при нажатии кнопки Группа 1 переключает, а при нажатии кнопки группы 2, группа 1 коллапс, вот пример:Collapseable Accordion in another Accordion

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <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> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 

 
    <div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#title1">Title 1</a> 
 
     </h4> 
 
     </div> 
 
     <div id="title1" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
     
 
     
 
     <div class="panel-group" id="accordion"> 
 
     \t <div class="panel"> 
 
      \t <a data-toggle="collapse" href="#title1-1">sub-title</a> 
 
      </div> 
 
      
 
      <div id="title1-1" class="panel-collapse collapse in"> 
 
      \t <div class="panel-body"> 
 
       \t <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a> 
 
       </div> 
 
      </div> 
 
      
 
      <div class="panel"> 
 
      \t <a data-toggle="collapse" href="#title1-2">sub-title 2</a> 
 
      </div> 
 
      
 
      <div id="title1-2" class="collapse"> 
 
      \t <div class="panel-body"> 
 
       \t <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#title2">Title 2</a> 
 
     </h4> 
 
     </div> 
 
     <div id="title2" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     
 
     
 
     <!--- STUFF ---> 
 
     
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#title3">Title 3</a> 
 
     </h4> 
 
     </div> 
 
     <div id="title3" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     
 
     <!--- STUFF ---> 
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

Ok круто, я хочу, чтобы внутри списка в «Заголовок 1 «иметь тот же эффект, что и эти 3 списка вне!

Это не работает Я думаю, потому что классы и идентификаторы неверны?

источник

2017-02-19 Abdulrahman Mushref

Я думаю, что это то, что вы хотите. Наблюдайте внимательно, как я вложил аккордеон в аккордеон. Вы были все о id и классах.

Рабочий пример

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
      .panel{ 
 
    border-color:#EEEEEE !important; 
 
    width: 150px; 
 
} 
 

 
.panel > .panel-heading { 
 
    background-color: greenyellow; 
 
    color: white; 
 
    height: 40px; 
 
    text-align: center; 
 
    border-color:black !important; 
 
    font-size: 20px; 
 
} 
 

 
.panel> .panel-body{ 
 
    text-align: center; 
 
    font-family: "Comic Sans MS"; 
 
    font-size: 35px; 
 
} 
 

 
.glyphicon{ 
 
    font-size: 20px !important; 
 
    text-align: left !important; 
 
} 
 
      </style> 
 
      
 
      </head> 
 
      <body> 
 
      <div class="container"> 
 

 
    <div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#title1">Title 1</a> 
 
     </h4> 
 
     </div> 
 
     <div id="title1" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
     
 
     
 
     <div class="panel-group" id="accordion1"> 
 
      <div class="panel"> 
 
      <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion1" href="#inside1">Title 1</a> 
 
     </h4> 
 
     </div> 
 
     <div id="inside1" class="panel-collapse collapse in"> 
 
       <div class="panel-body"> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a> 
 
       
 
      </div> 
 
      </div> 
 
      </div> 
 
      
 
      <div class="panel"> 
 
       <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion1" href="#inside2">Title 1</a> 
 
     </h4> 
 
     </div> 
 
     <div id="inside2" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a><br> 
 
        <a href="#">Content</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#title2">Title 2</a> 
 
     </h4> 
 
     </div> 
 
     <div id="title2" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     
 
     
 
     <!--- STUFF --> 
 
     
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#title3">Title 3</a> 
 
     </h4> 
 
     </div> 
 
     <div id="title3" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     
 
     <!--- STUFF --> 
 
     
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
      </body> 
 
      </html>

источник

2017-02-19 10:21:14 neophyte

ответ

Смежные вопросы