Pure CSS Bootstrap Tab Panel
CSS only toggle Bootstrap tab panel. No JavaScript required. Click the following tabs to see demo.
The technique comes from Pure CSS Tab Panel [1]. We need:
1 - Visible HTML label elements, which is the navigation tabs.
2 - Invisible HTML input radio elements, referenced by the for attribute of label elements. The value of name attribute of these elements must be the same.
3 - Tab contents, invisible in the beginning.
When users click on the visible label elements, the corresponding input radio element is checked. We use CSS3 :checked selector to select corresponding tab content, and make the selected tab content visible.
The complete source code is as follows:
HTML:
<!-- you can put the following line in your html head -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<input type="radio" id="home" name="nav-tab">
<input type="radio" id="profile" name="nav-tab">
<input type="radio" id="contact" name="nav-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link" id="nav-home-tab"><label for="home">Home</label></a>
<a class="nav-item nav-link" id="nav-profile-tab"><label for="profile">Profile</label></a>
<a class="nav-item nav-link" id="nav-contact-tab"><label for="contact">Contact</label></a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade" id="nav-home">My Home</div>
<div class="tab-pane fade" id="nav-profile">My Profile</div>
<div class="tab-pane fade" id="nav-contact">My Contact</div>
</div>
CSS:
input[name="nav-tab"] {
display: none;
}
/* the magic: show tab panes */
#home:checked ~ #nav-tabContent > #nav-home,
#profile:checked ~ #nav-tabContent > #nav-profile,
#contact:checked ~ #nav-tabContent > #nav-contact {
display: block;
opacity: 1;
}
/* the magic: make tab active */
#home:checked ~ nav > #nav-tab > #nav-home-tab,
#profile:checked ~ nav > #nav-tab > #nav-profile-tab,
#contact:checked ~ nav > #nav-tab > #nav-contact-tab {
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
}
- The first rule hides the tab content and input radio box.
- In second rule. We use :checked and general sibling selector (~) to make the user-selected tab content visible.
- In third rule, we make the selected navigation tab look active.
Tested on:
- Chromium 69.0.3497.81 on Ubuntu 18.04 (64-bit)
- Bootstrap 4.1.3
References:
| [1] | Pure CSS Tab Panel |
| [2] | Pure CSS Bulma Tabs |