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
  • 121 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by AleMonteiro

Dani AI

Generated

This is almost always a scoping / target collision rather than a CSS bug. was right to flag IDs — but the more common cause with two identical tab blocks is that the tab code or the hash-based links are operating globally across the whole page. That makes clicks in set A hide/show panels in set B (or jump to the wrong pane), which matches the symptom you described: a panel in the second set only becomes visible after toggling because the script is using a single pane-list for both sets.

The safest quick fix is to wrap each tabs + panes pair in its own container and bind handlers scoped to that container so each tab list only manipulates its own panes. Example (vanilla JS) to test the idea:

document.querySelectorAll('.tabs-wrap').forEach(function(wrap){
  var tabs = wrap.querySelectorAll('.css-tabs a');
  var panes = wrap.querySelectorAll('.css-panes > div');
  tabs.forEach(function(tab, i){
    tab.addEventListener('click', function(e){
      e.preventDefault();
      tabs.forEach(function(t){ t.classList.remove('active'); });
      panes.forEach(function(p){ p.classList.remove('active'); p.style.display = 'none'; });
      tab.classList.add('active');
      panes[i].classList.add('active');
      panes[i].style.display = '';
    });
  });
  if (tabs[0]) tabs[0].click();
});

Other practical options: if you use hash targets (href="#..."), give each panel unique IDs (prefix by set) or switch to data-target + preventDefault to avoid URL-hash collisions. If you use a plugin, initialize it per container (e.g., call init inside an .each()), not once for the whole page.

Debug checklist: inspect DOM for duplicate IDs, watch which element gets the active class after a click, check whether a single event handler is controlling all tab lists, and verify radio-name attributes are unique if using the radio/label tab technique. These steps will isolate whether the problem is duplicate IDs or a scoping bug in the JS.

Recommended Answers

All 3 Replies

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.