Dynamic Nav-pills to show Tab-content in Bootstrap

Question

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>
    }
}

Can you just show/hide the tab contents by watching for clicks using Javascript? — Patrick Proulx, Oct 10 '14 at 15:08
you could also use [data-attributes](http://www.w3schools.com/tags/att_global_data.asp) — HenryW, Oct 10 '14 at 15:38

score 3 · Answer 1 · answered Oct 10 '14 at 16:17

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>

Dynamic Nav-pills to show Tab-content in Bootstrap

1 Answers1