GitHub Community
Interactive tab not working #190020
Replies: 2 comments
-
Hi apamanes 👋
You're very close — pure CSS radio-button tabs (using `:checked` + sibling selectors) are a classic trick, but they are **super sensitive to HTML structure** and selector order. The most common reasons tabs disappear completely or don't switch:
### 1. Wrong selector (most likely your issue)
You wrote:
```css
.types-tab input[type='radio']:checked + label + .tabBut the + (adjacent sibling) only works if Typical correct structure (must be exact): <input type="radio" name="tabs" id="tab1" checked>
<label for="tab1">Tab 1</label>
<div class="tab">Content 1</div>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">Tab 2</label>
<div class="tab">Content 2</div>Correct CSS (using .tab {
display: none;
}
input[type="radio"]:checked ~ .tab {
display: block;
}
2. Other frequent mistakes
Quick fix checklist
Working minimal example (copy-paste this to test)<!DOCTYPE html>
<html>
<head>
<style>
.tabs-container {
max-width: 600px;
margin: 2rem auto;
}
input[type="radio"] {
display: none; /* hide actual radio buttons */
}
label {
display: inline-block;
padding: 10px 20px;
background: #eee;
cursor: pointer;
border-radius: 4px 4px 0 0;
}
.tab {
display: none;
padding: 20px;
border: 1px solid #ddd;
background: white;
}
input[type="radio"]:checked + label {
background: white;
border-bottom: 1px solid white;
}
input[type="radio"]:checked ~ .tab {
display: block;
}
</style>
</head>
<body>
<div class="tabs-container">
<input type="radio" name="tabs" id="tab1" checked>
<label for="tab1">Tab 1</label>
<div class="tab">Content for Tab 1</div>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">Tab 2</label>
<div class="tab">Content for Tab 2</div>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Tab 3</label>
<div class="tab">Content for Tab 3</div>
</div>
</body>
</html>If your code is almost identical to the tutorial but still broken, the issue is almost certainly:
If you paste your exact HTML + CSS (even just the tab part), I can spot the exact mistake in 10 seconds. Otherwise, try swapping Let me know how it goes! 🚀 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for posting in the GitHub Community, @apamanes! We're happy you're here. You are more likely to get a useful response if you are posting your question in the applicable category, the Discussions category is solely related to conversations around the GitHub product Discussions. This question should be in the |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Discussion Type
Question
Discussion Content
I was following this tutorial on making an interactive tab on my own site using pure CSS and HTML. You can find the example code here. On the procedure, I did include the
.types-tab input [type='radio']:checked + label + .taband the.types-tab input [type="radio"]:checked + labelin my document, and I also includeddisplay: none;in the.mytabs .tabbracket, but the moment I tested the html out, the tab was completely hidden and the label buttons could not show the tabs when I clicked on them. I even included thechecked= "checked"in the first input of the html. What am I doing wrong there? I did all of this code in a separate css file. Could that be the issue? I even checked online that I should use curly braces ~ instead of plus + signs. Should I put my code and css? I don't think it might be so useful since it looks very similar to the example in the video. I can do it if it helps.(Note: it this question belongs to another type or has been tackled before, let me know).
Beta Was this translation helpful? Give feedback.
All reactions