Bootstrap tabs not working the first time

Question

I am trying to implement two basic tabs and panels. The panel does not show the content(Page 1) on page load. However, clicking on the other tab works fine with the right content(Page 2) and then going back to the first tab works fine(Page 1).

<ul class="nav nav-tabs">
    <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
    <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>

<div class="tab-content">
    <div id="panel1" class="tab-pane">
        Page 1
    </div>
    <div id="panel2" class="tab-pane">
        Page 2
    </div>
</div>

Is there something I am missing?

score 6 · Accepted Answer · answered Apr 30 '18 at 18:45

6

You don't have the active class for the content panel. You need the following to show the panel1 content by default:

<div id="panel1" class="tab-pane show active">...

answered Apr 30 '18 at 18:45

Bret Lipscomb

480
2
7

Thank you. But this solution causes another issue. While it fixes the issue with the initial load, the tab 2 has both Page 1 and Page 2. – TheFallenOne Apr 30 '18 at 18:48
Hmm, shouldn't. You tab-content should look like this: `

Page 1

Page 2

` – Bret Lipscomb Apr 30 '18 at 18:51
If you find that page 1 does not clear, ensure the panel and the initial tab button are both set to active. – MortimerCat Feb 05 '23 at 01:39

Abslen Char · Answer 2 · 2018-04-30T19:26:33.480

1

I think we need more details because your code is working fine

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs">
    <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
    <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>

<div class="tab-content">
    <div id="panel1" class="tab-pane show active">
       This is the content of page1............................
    </div>
    <div id="panel2" class="tab-pane">
       This is the content of page2............................
    </div>
</div>

edited Apr 30 '18 at 19:26

answered Apr 30 '18 at 18:55

Abslen Char

3,071
3
15
29

Your's has the same issue. There is nothing printed when the page loads. It's only on click of the link that text appears. – TheFallenOne Apr 30 '18 at 19:16
1

@TheFallenOne Thanks for pointing it out , i edited my snippet – Abslen Char Apr 30 '18 at 19:27

Bootstrap tabs not working the first time

2 Answers2