CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
Rethic
Rethic

Reputation: 1081

Bootstrap 3: Setting a default nav option with dropdowns

I have a Bootstrap 3 page that displays a set of tabs containing dropdowns. This looks great, but I would like to have one of the tabs be open by default when the page loads. Currently, the first tab option is set to "active", but the contents of that tab are not displayed.

How do I make the contents of a particular bootstrap dropdown choice display when the page is loaded?

Here's the code: fiddle

<ul class="nav nav-tabs">
    <li class="dropdown active"> <a href="#" id="firstTab" class="dropdown-toggle active" data-toggle="dropdown">First Tab <b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="firstTab">
            <li class="active">
                <a href="#one" tabindex="-1" data-toggle="tab">One</a>
            </li>
            <li>
                <a href="#two" tabindex="-1" data-toggle="tab">Two</a>
            </li>
        </ul>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade" id="one">Selected Tab: One (Should be open/active by default)</div>
    <div class="tab-pane fade" id="two">Selected Tab: Two</div>
</div>

Upvotes: 2

Views: 376

Answers (1)

Andi
Andi

Reputation: 939

To solve your problem just give your first tab the class "tab-pane active" instead of "tab-pane fade" and you are good to go.

Upvotes: 2

Related Questions