CODEWITHSUNDEEP
twitter-bootstrapnavigationnav-pills
cwiggo
cwiggo

Reputation: 2609

Dynamic Nav-pills to show Tab-content in Bootstrap

I have a function that dynamically creates navigation in a web page. The problem I have is that when I click on the top nav buttons it works. As I know you can only use ID's once. This is the problem. How can I use classes instead of ids to make sure that all the navigations work?

Thanks in advance. Any questions, just comment and i'll reply in a jiffy.

The code is :

function printComments($amb){
    foreach ($amb as $key => $a) {
        <ul class="amb_tool nav nav-pills list-inline amb_tool_pill">
            <li><a data-toggle="pill" href="#amb_info"><span class="glyphicon glyphicon-info-sign"></span></a></li>
            <li><a data-toggle="pill" href="#amb_comm"><span class="glyphicon glyphicon-comment"></span></a></li>
        </ul>
        <div class="tab-content">
            <div id="amb_info" class="tab-pane">
                <div class="well well-sm amb-well">
                    {$a['amb_about']}
                </div>
            </div>
            <div id="amb_comm" class="tab-pane">
                <div class="well well-sm amb-well">
    HTML;
                $html .= outputComments($a['comments']);
    $html .= <<<HTML
                </div>
            </div>
        </div>
    }
}

Upvotes: 0

Views: 3116

Answers (1)

Christina
Christina

Reputation: 34652

In all tab scripts I've used in 15+ years, the id of the tab matches an id of the tab-pane (or equiv), and it must otherwise how will it know which one to open? With Bootstrap you can use classes, but if the classes are not unique, then one will trigger the other and vice versa. See example: http://jsbin.com/viziju/1/edit. So might as well use ids.

    <!-- Nav tabs with classes -->
  <ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href=".home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href=".profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href=".messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href=".settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

<!-- Tab panes with classes-->
<div class="tab-content">
  <div class="tab-pane active home">home</div>
  <div class="tab-pane profile">profile</div>
  <div class="tab-pane messages">messages</div>
  <div class="tab-pane settings">settings</div>
</div>

Upvotes: 3

Related Questions