Create tabs with three panels

Description: Create three tabs. Clicking a tab must show only its own panel.

Hint:

• Use nav nav-tabs, data-bs-toggle="tab" and tab-content with tab-pane.

---

Solution

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation"><button class="nav-link active" id="t1" data-bs-toggle="tab" data-bs-target="#p1" type="button" role="tab" aria-controls="p1" aria-selected="true">Home</button></li>
  <li class="nav-item" role="presentation"><button class="nav-link" id="t2" data-bs-toggle="tab" data-bs-target="#p2" type="button" role="tab" aria-controls="p2" aria-selected="false">Profile</button></li>
  <li class="nav-item" role="presentation"><button class="nav-link" id="t3" data-bs-toggle="tab" data-bs-target="#p3" type="button" role="tab" aria-controls="p3" aria-selected="false">Contact</button></li>
</ul>
<div class="tab-content border border-top-0 p-3">
  <div class="tab-pane fade show active" id="p1" role="tabpanel" tabindex="0">Home panel</div>
  <div class="tab-pane fade" id="p2" role="tabpanel" tabindex="0">Profile panel</div>
  <div class="tab-pane fade" id="p3" role="tabpanel" tabindex="0">Contact panel</div>
</div>

document.getElementById('t3').click();
await new Promise(r => setTimeout(r, 500));
console.log('active panel: ' + document.querySelector('.tab-pane.active').textContent);
console.log('active tab: ' + document.querySelector('.nav-link.active').textContent);

How it works

• Each tab button points to a panel with data-bs-target. Bootstrap switches the classes active and show.

Read Navs and Tabs.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.