CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapcss
Abdulrahman Mushref
Abdulrahman Mushref

Reputation: 1005

Collapseable Accordion inside another Accordion

You know this effect in bootstrap? when you click Group 1 it toggles, and when you click Group 2, Group 1 collapse, here is the example:

<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">
        	<div class="panel">
            	<a data-toggle="collapse" href="#title1-1">sub-title</a>
            </div>
            
            <div id="title1-1" 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 class="panel">
            	<a data-toggle="collapse" href="#title1-2">sub-title 2</a>
            </div>
            
            <div id="title1-2" class="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 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 cool, I want the inside list in "Title 1" to have the same effect as these 3 list outside!

It's not working I think because the classes and Id's aren't correct?

Upvotes: 1

Views: 13186

Answers (1)

neophyte
neophyte

Reputation: 6626

I think this is what you want. Observe closely the way I have nested the accordion inside accordion. You were it's all about id and classes.

Working Example

<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>

Upvotes: 2

Related Questions