CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
farhawa
farhawa

Reputation: 10398

Collapse within collapse don't work

I am not a bootstrap expert (at all) and I am a little bit stuck here with a collapse within another collapse that don't work.

A simple collapse is working well: 

<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">
<li>
  <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-sitemap"></i> Vos sites <i class="fa fa-fw fa-caret-down"></i></a>
  <ul id="demo" class="collapse">
    <li>
      <a href="/main">Level 1</a>
    </li>
  </ul>
</li>

And it give this:

enter image description here

But when I do the same thing to add another level in this collapse tree.

<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">
<li>
  <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-sitemap"></i> Vos sites <i class="fa fa-fw fa-caret-down"></i></a>
  <ul id="demo" class="collapse">
    <li>
      <a href="/main">Level 1</a>
    </li>
    <li>
      <a href="javascript:;" data-toggle="collapse" data-target="#demo_2"><i class="fa fa-fw fa-sitemap"></i> Level 2 <i class="fa fa-fw fa-caret-down"></i></a>
      <ul id="demo_2" class="collapse">
        <li>
          <a href="/main"> sublevel1</a>
        </li>
        <li>
          <a href="/main"> sublevel2</a>
        </li>
      </ul>
    </li>
  </ul>
</li>

And weirdly it gives this!

enter image description here

Can someone tell me why I don't have the same display for the sublevels as the level1 ?

COMPLETE

I am using Bootstrap 3

Upvotes: 0

Views: 378

Answers (1)

Dekel
Dekel

Reputation: 62556

Here is a working example with only bootstrap 3.
As you can see it works exactly as expected:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul>
<li>
  <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-sitemap"></i> Vos sites <i class="fa fa-fw fa-caret-down"></i></a>
  <ul id="demo" class="collapse">
       <li>
           <a href="/main">Level 1</a>
       </li>
       <li>
           <a href="javascript:;" data-toggle="collapse" data-target="#demo_2"><i class="fa fa-fw fa-sitemap"></i> Level 2 <i class="fa fa-fw fa-caret-down"></i></a>
           <ul id="demo_2" class="collapse">
               <li>
                   <a href="/main"> sublevel1</a>
               </li>
               <li>
                   <a href="/main"> sublevel2</a>
               </li>
           </ul>
        </li>
     </ul>
</li>

</ul>

The colors in your example show that you use some there/some extra css file.

Upvotes: 1

Related Questions