CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Junior
Junior

Reputation: 77

Show content twice - Bootstrap Tabs

When you have two divs with the same id in the bootstrap tabs, is it normal for it to activate only one?

The Code

<ul>
   <li><a data-toggle="tab" href="#id1" aria-expanded="false">ID1</a><li>
   <li><a data-toggle="tab" href="#id1" aria-expanded="false">ID1</a><li>
</ul>
<div class="tab-content">
    <div id="id1">
        Hello 
    </div>
    <div id="2">
        Hello Again :)  
    </div>
    <div id="2">
       OMG Hello Again :)  
    </div>
</div>

But when I click on ID2, I only see the contents of the first div, ignoring the other one, is this normal?

Upvotes: 0

Views: 505

Answers (1)

void
void

Reputation: 36703

Yes it is normal as you are using the same id for multiple divs which make the other diov extinct. You should never do that.

To achieve this, you can wrap your div in a parent and give it id=2

<ul>
   <li><a data-toggle="tab" href="#id1" aria-expanded="false">ID1</a><li>
   <li><a data-toggle="tab" href="#id1" aria-expanded="false">ID1</a><li>
</ul>
<div class="tab-content">
    <div id="id1">
        Hello 
    </div>
    <div id="2">
        <div> Hello Again :) </div>
        <div> OMG Hello Again :) </div>
    </div>
</div>

Upvotes: 2

Related Questions