2

I'm using Bootstrap 2.3.2 with Joomla. I have a set of nav-tabs, and the content inside each tab is quite extensive. There are some sections within a given tab that need to be duplicated on one or more of the other tabs. This repeated content contains another set of nav-tabs. I would like to store this repeated content within a custom HTML module, so I only have to maintain one copy of it. But this creates a problem, in that only the first occurrence of the child set of nav-tabs is functional, since the browser sees two or more of the same ID on the page. How do you get around this?

<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css">
        <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js" type="text/javascript"></script>

        <style type="text/css">
            body {background-color: #DDD}
            .container {background-color: white; padding: 20px}
        </style>
    </head>
        <div class="container">

        <ul class="nav nav-pills">
          <li><a href="#tab1" data-toggle="tab">One</a></li>
          <li><a href="#tab2" data-toggle="tab">Two</a></li>
          <li><a href="#tab3" data-toggle="tab">Three</a></li>
        </ul>

        <div class="tab-content" style="margin-bottom:50px">
            <div class="tab-pane fade active in" id="tab1">
                <p>This is the content for tab 1.</p>

                <ul class="nav nav-pills">
                  <li><a href="#tab1-1" data-toggle="tab">Subtab One</a></li>
                  <li><a href="#tab1-2" data-toggle="tab">Subtab Two</a></li>
                  <li><a href="#tab1-3" data-toggle="tab">Subtab Three</a></li>
                </ul>

                <div class="tab-content" style="margin-bottom:50px">
                    <div class="tab-pane fade active in" id="tab1-1">This is the content for subtab 1.</div>
                    <div class="tab-pane fade" id="tab1-2">This is the content for subtab 2.</div>
                    <div class="tab-pane fade" id="tab1-3">This is the content for subtab 3.</div>
                </div>

            </div>
            <div class="tab-pane fade" id="tab2"><p>This is the content for tab 2.</p></div>
            <div class="tab-pane fade" id="tab3">
                <p>This is the content for tab 3.</p>

                <ul class="nav nav-pills">
                  <li><a href="#tab1-1" data-toggle="tab">Subtab One</a></li>
                  <li><a href="#tab1-2" data-toggle="tab">Subtab Two</a></li>
                  <li><a href="#tab1-3" data-toggle="tab">Subtab Three</a></li>
                </ul>

                <div class="tab-content" style="margin-bottom:50px">
                    <div class="tab-pane fade active in" id="tab1-1">This is the content for subtab 1.</div>
                    <div class="tab-pane fade" id="tab1-2">This is the content for subtab 2.</div>
                    <div class="tab-pane fade" id="tab1-3">This is the content for subtab 3.</div>
                </div>
            </div>
        </div>

</html>
  • Could you show us a basic example of the code you're using with just some dummy content? – Lodder Nov 29 '17 at 18:44
  • I included an example, where tab 1 and tab 3 both have the same set of child nav-tabs. In a Joomla installation, this would be two references to a single custom HTML module. – Kris Hunt Nov 30 '17 at 15:04
1

I see the issue straight away. The problem being is that you're getting muddled with the ID's, which is understandable as I can imagine you have lots of tabs and content.

To narrow it down, you're basically using the same ID in multiple places, meaning there are going to be conflicts.

So looking at it from a code perspective, in subtabs within you 3rd tab, you were using he ID from the 1st tab

<div class="tab-pane fade" id="tab3">
    <p>This is the content for tab 3.</p>

    <ul class="nav nav-pills">
      <li><a href="#tab1-1" data-toggle="tab">Subtab One</a></li>
      <li><a href="#tab1-2" data-toggle="tab">Subtab Two</a></li>
      <li><a href="#tab1-3" data-toggle="tab">Subtab Three</a></li>
    </ul>

    <div class="tab-content" style="margin-bottom:50px">
        <div class="tab-pane fade active in" id="tab1-1">This is the content for subtab 1.</div>
        <div class="tab-pane fade" id="tab1-2">This is the content for subtab 2.</div>
        <div class="tab-pane fade" id="tab1-3">This is the content for subtab 3.</div>
    </div>
</div>

So as you can see in the code above, you're assigning and calling tab1-1, whereas because this is already being used, it should be tab3-1.

Here is an updated JSFiddle with the working code:

https://jsfiddle.net/tak0cuf1/

Hope this helps

  • No, that doesn't help at all because I'm aware of all that; it was the very premise of my question. See the key phrases "I would like to store this repeated content within a custom HTML module, so I only have to maintain one copy of it", and "this creates a problem, in that only the first occurrence of the child set of nav-tabs is functional, since the browser sees two or more of the same ID on the page". – Kris Hunt Nov 30 '17 at 23:33
0

tabs inside tabs:

<ul>
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>

<div class="tab-content">

    <div class="tab-pane active" id="tab1">
        <p>Text 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
        <p>Text 2.</p>
        <div>

            <ul>
                <li class="active"><a href="#tab3" data-toggle="tab">Section 3</a></li>
                <li><a href="#tab4" data-toggle="tab">Section 4</a></li>
            </ul>

            <div class="tab-content">

                <div class="tab-pane active" id="tab3">
                    <p>Text 3.</p>
                </div>
                <div class="tab-pane" id="tab4">
                    <p>Text 4.</p>
                </div>
            </div>

        </div>
    </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.