Member Avatar for ashking

Hi,

I followed this tutorial: http://css-tricks.com/better-tabs-with-round-out-borders/

Basically I cant get the tabs to work with seperate content, or I dont know where to start. Can anyone point me in the right direction?

Thanks.

  • 2 Contributors
  • 2 Replies
  • 79 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by ashking

Dani AI

Generated

followed the CSS-Tricks "round out borders" approach and reported trouble getting separate content panels to work. asked for actual markup; the core requirement is simple: each visual tab must be tied to a panel and only the active panel should be visible. Common, reliable options are: CSS-only anchors with fragment IDs (uses :target), hidden radio inputs with :checked, or a small JavaScript controller that toggles an active class and ARIA attributes. The JS pattern is easiest to combine with the tutorial's rounded-tab styles and avoids URL-fragment behavior.

Checklist before swapping in code: each tab control must reference the correct panel ID; panels should be hidden by default (via the hidden attribute or CSS); scripts must run after the DOM is ready; check computed styles to ensure nothing else forces display rules; and watch container overflow/z-index if rounded corners appear clipped. Below is a minimal, accessible pattern using buttons + aria-controls that can be dropped into the tutorial's CSS (keep the tutorial styling for .tab and .is-active).

<ul class="tabs" role="tablist">
  <li><button id="tab-1" role="tab" aria-controls="panel-1" aria-selected="true" class="tab is-active">Tab 1</button></li>
  <li><button id="tab-2" role="tab" aria-controls="panel-2" aria-selected="false" class="tab">Tab 2</button></li>
</ul>

<section id="panel-1" role="tabpanel" aria-labelledby="tab-1" class="panel">Content for tab 1</section>
<section id="panel-2" role="tabpanel" aria-labelledby="tab-2" class="panel" hidden>Content for tab 2</section>
[hidden] { display: none; }
.tab.is-active { /* keep tutorial's rounded-out visuals here */ }
document.querySelectorAll('.tab').forEach(function(btn){
  btn.addEventListener('click', function(){
    document.querySelectorAll('[role=tab]').forEach(function(t){
      t.classList.remove('is-active');
      t.setAttribute('aria-selected','false');
    });
    document.querySelectorAll('[role=tabpanel]').forEach(function(p){
      p.setAttribute('hidden','');
    });
    btn.classList.add('is-active');
    btn.setAttribute('aria-selected','true');
    document.getElementById(btn.getAttribute('aria-controls')).removeAttribute('hidden');
  });
});

Common debugging steps: verify ID/href or aria-controls matches exactly, confirm the script runs after the elements exist, and inspect computed display to find CSS overrides.

Recommended Answers

All 2 Replies

Member Avatar for simplypixie

Please post what you have, not the tutorial, so we can see exactly what you are doing.

Member Avatar for ashking

Thats the thing i've tried numerous ways and can't get content to work with the tabs, I have little css/html knowledge but wanted to use his for a personal project.

Any other tab based navigation I have seen seems to use div tags, just wondering if someone is able to provide an example using content with these tabs.

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.