Member Avatar for 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

  • 2 Contributors
  • 3 Replies
  • 105 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for 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';

Member Avatar for 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>
Member Avatar for AleMonteiro

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.