2 sets of tabs problems after selection

[mpc123]

HI

Hope someone can help

I have 2 sets of tabs on the page both are the same code and pointing to the same css, when the page loads everything is shos fine. But if you select one of the first set of tabs the first tab on the 2nd set of tabs then does not show its info, unless you click on another tab then back again.

I have tried adding in another set of css the same but with 2 at the end and this just ends up where the 2nd set do not show info at all, or become unselectable.

Does anyone know the reason and a fix for this please

<!-- the tabs -->
                   <ul class="css-tabs">
                       <li><a href="#first-tab">info</a></li>
<li><a href="#second-tab">info</a></li>
                   </ul>
                   <!-- tab "panes" -->
                   <div class="css-panes">
                    <div>
                    first tab information in here
 </div>
 <div>
 2nd tab information in here
 </div>
  </div>

Thanks

[AleMonteiro]

Try like this:

<ul class="css-tabs">
    <li><a href="#first-tab">info</a></li>
    <li><a href="#second-tab">info</a></li>
</ul>

<div id="first-tab">
first tab information in here
 </div>

<div id="second-tab">
 2nd tab information in here
</div>

But you can't duplicate this HTML to create another tab, because the ID's must be unique!

If want two tabs, create two set of ID's.
You can do like this: 'first-tab-first-panel', 'first-tab-second-panel', 'second-tab-first-panel', 'second-tab-second-panel';

[mpc123]

This is the example with both sets of tabs but still when I select one of the 1st set of tabs the second set fifth tab does not show info unless i click sixth tab then back to fifth?

<!-- the 1st tabs -->
                   <ul class="css-tabs">
                       <li><a href="#first-tab">info</a></li>
<li><a href="#second-tab">info</a></li>
                   </ul>
                   <!-- tab "panes" -->
                   <div class="css-panes">
                    <div>
                    first tab information in here
 </div>
 <div>
 2nd tab information in here
 </div>
  </div>


  <!-- the 2nd set of tabs -->
                   <ul class="css-tabs">
                       <li><a href="#fifth-tab">info</a></li>
<li><a href="#sixth-tab">info</a></li>
                   </ul>
                   <!-- tab "panes" -->
                   <div class="css-panes">
                    <div>
                    fifth tab information in here
 </div>
 <div>
 sixth tab information in here
 </div>
  </div>

[AleMonteiro]

You are not using ID's as I told you too. Please review my last post.