Nested Tabs - Twitter Bootstrap

Question

So I am trying to develop a web page that has some nested tabs

That means I have two tabs and when I press on one of them I will be able to see two tabs.

The first level of tabs is working fine with me, however the nested tab is not. That mean you have two tab with completely different content and that is working properly.

But the issue when I press the first tab (The one that has nested tabs inside) I can see the content of both tabs directly. Although that I am setting only one of them as active.

I tried to make none of the nested tabs active which does not make any sense, however I tried and as expected it made no difference

Here is my Html page

<!DOCTYPE html>
<html>
<head>

<title>GitHub Evaluator</title>
<script type='text/javascript' src='js/jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='js/knockout-2.3.0.js'></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/searchModel.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/sticky-footer.css" rel="stylesheet">
</head>

<body>
<div id="wrap">

<div class="container">
    <div class="page-header">
        <h1>GitHub Evaluator</h1>
    </div>


    <!-- Search Form -->
    <div class="row well" id="masterScope">
        <form class="form-inline">
                <label>Repo name:</label>
                <input data-bind="value: repoName" type="text" class="form-control" style="width: 30%" placeholder="Repo name">
                <label>Username:</label>
                <input data-bind="value: userName" type="text" class="form-control" style="width: 30%" placeholder="Username">
                <button data-bind="click: getRepoInfo" class="btn btn-primary">Search</button>
        </form>
    </div>
    <!-- Search Form -->


    <!-- Tabs -->
    <ul class="nav nav-tabs" id="tabs">
        <li><a href="#Repository" data-toggle="tab">Repository</a></li>
        <li><a href="#User" data-toggle="tab">User</a></li>
    </ul>
    <!-- Tabs -->

    <!-- Tab Content -->
    <div class="tab-content">

        <!-- Repo -->
        <div class="tab-pane active" id="Repository">

            <h2 id="falseRepository" class="text-danger">Repo not found!</h2>

            <!-- Repo Content -->
            <dl id="repo" data-bind="with: repository" class="dl-horizontal">

                <!-- Repo Tabs --->
                <ul class="nav nav-tabs" id="repoTabs">
                    <li><a href="#repoInfo" data-toggle="tab">Info</a></li>
                    <li><a href="#repoStats" data-toggle="tab">Stats</a></li>
                </ul>
                <!-- Repo Tabs -->

                <!-- Repo Stats -->
                <div class="tab-pane" id="#repoStats">
                    Hello World
                </div>
                <!-- Repo Stats -->

                <!-- Repo Info -->
                <div class="tab-pane active" id="repoInfo">
                    <dt>Repo ID:</dt>
                    <dd data-bind="text: id"></dd>
                    <dt>Repo Name:</dt>
                    <dd data-bind="text: name"></dd>
                    <span data-bind="with: owner">
                    <dt>Owner Name:</dt>
                    <dd data-bind="text: login"></dd>
                    <dt>Owner URL:</dt>
                    <dd><a data-bind="attr:{href: url, title: url}"><span data-bind="text: url"></span></a></dd>
                    </span>
                    <dt>Private:</dt>
                    <dd data-bind="text: isPrivate"></dd>
                    <dt>URL:</dt>
                    <dd><a data-bind="attr:{href: url, title: url}"><span data-bind="text: url"></span></a></dd>
                    <dt>Created at:</dt>
                    <dd data-bind="text: createdAt"></dd>
                    <dt>Size:</dt>
                    <dd data-bind="text: size"></dd>
                    <dt>Language:</dt>
                    <dd data-bind="text: language"></dd>
                </div>
                <!-- Repo Info -->



            </dl>
            <!-- Repo Content -->
        </div>
        <!-- Repo -->

        <!-- Users -->
        <div class="tab-pane" id="User">

            <h2 id="falseUser" class="text-danger">User not found!</h2>

            <!--User Content-->
            <div class="accordion" id="accordion2">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Collapsible Group Item #1
              </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse in">
              <div class="accordion-inner">
                ...
              </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2
              </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse">
              <div class="accordion-inner">
                ...
              </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                Collapsible Group Item #3
              </a>
            </div>
            <div id="collapseThree" class="accordion-body collapse">
              <div class="accordion-inner">
                ...
              </div>
            </div>
          </div>
        </div>
            <!--User Content-->
        </div>
        <!-- Users -->

      </div>
      <!-- Tab Content -->
        </div>
      </div>

<div id="footer">
    <div class="container">
        <p class="text-muted credit">Awesome GitHub Evaluator by Michal, Abdul and Nick</p>
    </div>
</div>
<!--</script>-->
</body>
</html>

Answer 1

Fixed the following in your code:

Remove the # from "Repo Stats" id : #repoStats should be repoStats
Wrap the two sub-tabs "Repo Stats" and "Repo Info" in a <div class="tab-content">

Here is a working jsFiddle .

Answer 2

Try removing the # from the repoStats id..

        <!-- Repo Stats -->
        <div class="tab-pane" id="repoStats">
            Hello World
        </div>
        <!-- Repo Stats -->

Nested Tabs - Twitter Bootstrap

Question

2 answers

solution1
2 ACCPTED 2013-08-08 11:24:13

solution2
0 2013-08-08 11:17:28

Nested Tabs - Twitter Bootstrap

Question

2 answers

solution1 2 ACCPTED 2013-08-08 11:24:13

solution2 0 2013-08-08 11:17:28

solution1
2 ACCPTED 2013-08-08 11:24:13

solution2
0 2013-08-08 11:17:28