CODEWITHSUNDEEP
htmlcssbootstrap-4
Alberto
Alberto

Reputation: 78

Bootstrap 4 tabs multi-level tablist with collapse is not working properly; more than one tab active at the same time

  li.nav-item {  display: block;  width: 100%;  position: relative;  display: lock;  min-height: 40px;  line-height: 2.4;  padding: 0;  color: #f0f0f0;  font-weight: 600;  font-size: 16px;  border-bottom: 1px solid #092a3b;  background: #233d4a;  margin: 0;
}

a {
  display:block;
}

a.active {
  background-color:red;
}
<ul>
<li class="nav-item">
            <a class="" data-toggle="collapse" href="#" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">1</a>

            <div id="collapseOne" class="collapse" data-parent="#Menu">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item" data-parent="#collapseOne">
                        <a class="" data-toggle="tab" href="#One1">1.1</a>
                    </li>
                    <li class="nav-item" data-parent="#collapseOne">
                        <a class="" data-toggle="tab" href="#One2">1.2</a>
                    </li>
                    <li class="nav-item" data-parent="#collapseOne">
                        <a class="" data-toggle="tab" href="#One3">1.3</a>
                    </li>
                </ul>
            </div>
        </li>

        <li class="nav-item">
            <a class="" data-toggle="collapse" href="#"  data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">2</a>

            <div id="collapseTwo" class="collapse" data-parent="#Menu">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="" data-toggle="tab" href="#Two1">2.1</a>
                    </li>
                    <li class="nav-item">
                        <a class="" data-toggle="tab" href="#Two2">2.2</a>
                    </li>
                    <li class="nav-item">
                        <a class="" data-toggle="tab" href="#Two3">2.3</a>
                    </li>
                </ul>
            </div>
        </li>

        <li class="nav-item">
            <a class="" data-toggle="tab" href="#Three">3</a>
        </li>

        <li class="nav-item">
            <a class="" data-toggle="tab" href="#Four">4</a>
        </li>
    </ul>

I am struggling to achieve a multi level tablist menu with collapsible sub menus with Bootstrap 4. I need to use tabs and collapse at the same time. I have achieved to make the functionality (the right panes appearing and disappearing clicking the right links) work properly but there are more than one tab with the active class at the same time. I would like to know if there´s a way to make it work properly just with bootstrap 4 classes not adding more js/jquery code.

Here´s my codepen: https://codepen.io/AlbertoAguado/pen/XqdmbK

Upvotes: 3

Views: 1498

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362760

The problem is combining tabs and collapse on the same parent level. Currently, 1&2 toggle tabs, and 3&4 toggle collapse. You need to make them all collapse with tabs inside (exactly like collapse 1&2), or make them all collapse items inside the #Menu.

Additionally, you need to hide any shown tabs when one of the collapse elements is hidden..

$('.collapse').on('hide.bs.collapse', function () {
  $('.tab-content .show').removeClass('show');
})

https://codeply.com/go/Aq4zWAcUkX

Upvotes: 1

Related Questions