Nested list in Bootstrap tab.js [active class is not removed]

Question

Overview:

I want to make two level navigation of tab-content with one level content. This is my code:

<ul>
    <li>
        <a data-toggle="tab" href="#main">Main</a>
    </li>
    <li>
        <ul>
            <li>
                <a data-toggle="tab" href="#nested">Nested</a>
            </li>
        </ul>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="main">Main Content</div>
    <div class="tab-pane" id="nested">Nested Content</div>
</div>

It doesn't work when I do the following steps:

• Click Main
• Click Nested
• Click Main

Details:

Initially everything is ok, code in browser looks like from source.

• When I click on Main i works

• When I click on Nested active class doesn't removed from first li.

• Now can I click whatever and nothing happens.

JSFiddle

https://jsfiddle.net/cvgd720s/

Docs

http://getbootstrap.com/javascript/#tabs

Answer 1

You can nest your child tabs like so:

<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      Home
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#nested1" aria-controls="home" role="tab" data-toggle="tab">Nested 1</a></li>
        <li role="presentation"><a href="#nested2" aria-controls="profile" role="tab" data-toggle="tab">Nested 2</a></li>
      </ul>
      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="nested1">Nested 1</div>
        <div role="tabpanel" class="tab-pane" id="nested2">Nested 2</div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">Messages</div>
    <div role="tabpanel" class="tab-pane" id="settings">Settings</div>
  </div>
</div>

CODEPEN

Answer 2

I solved this problem myself added the script, that remove any active class:

<script>

    (function(){

        var menu = document.getElementsByTagName("li")[0];
        var list = document.querySelectorAll("li");

        menu.addEventListener("click", function() {

            [].forEach.call(list, function(item) {
                item.classList.remove("active");
            });
        });

    })();

</script>

It is important, that script should be placed before jquery.js and bootstrap.js.