If the radio button #my102 is checked, the div #navi102 should be visible and all other #navi??? divs should be hidden. So, if the radio button #my7 is checked, the div #navi7 should be visible and all other #navi? divs hidden.
How could I do that?
CSS code:
.list {
}
.opt ~ .list {
display: none;
}
.opt:checked ~ .list {
display: block;
}
input[type="radio"]#my1:checked + div #navi1 { display: block; }
input[type="radio"]#my2:checked + div #navi2 { display: block; }
input[type="radio"]#my3:checked + div #navi3 { display: block; }
input[type="radio"]#my4:checked + div #navi4 { display: block; }
input[type="radio"]#my5:checked + div #navi5 { display: block; }
input[type="radio"]#my6:checked + div #navi6 { display: block; }
input[type="radio"]#my7:checked + div #navi7 { display: block; }
input[type="radio"]#my99:checked + div #navi99 { display: block; }
input[type="radio"]#my100:checked + div #navi100 { display: block; }
input[type="radio"]#my101:checked + div #navi101 { display: block; }
input[type="radio"]#my102:checked + div #navi102 { display: block; }
HTML code:
<div id="chart" style="white-space: nowrap; position: relative; text-align: center;">
<div style="display: inline-block">
<!--
--><input name="case" type="radio" id="my102" class="opt" /><div class="list" style="float:left;width:70px">
<div id="navi102">
<div style="z-index:100;position:fixed;right:0;top:50px">101</div>
</div>
</div><div style="display: inline-block;vertical-align:top;width:70px">extra
</div><!--
--><input name="case" type="radio" id="my101" class="opt" /><div class="list" style="float:left;width:350px">
<div id="navi101">
<div style="z-index:100;position:fixed;left:0;top:100px">102</div>
<div style="z-index:100;position:fixed;right:0;top:100px">7</div>
</div>
</div><div style="display: inline-block;vertical-align:top;width:350px">LQ
</div><!--
--><input name="case" type="radio" id="my7" class="opt" /><div class="list" style="float:left;width:350px">
<div id="navi7">
<div style="z-index:100;position:fixed;left:0;top:150px">101</div>
<div style="z-index:100;position:fixed;right:0;top:150px">6</div>
</div>
</div><div style="display: inline-block;vertical-align:top;width:350px">L4
</div><!--
--><input name="case" type="radio" id="my6" class="opt" /><div class="list" style="float:left;width:350px">
<div id="navi6">
<div style="z-index:100;position:fixed;left:0;top:200px">7</div>
<div style="z-index:100;position:fixed;right:0;top:200px">4</div>
</div>
</div><div style="display: inline-block;vertical-align:top;width:350px">L3
</div><!--
--><input name="case" type="radio" id="my4" class="opt" /><div class="list" style="float:left;width:350px">
<div id="navi4">
<div style="z-index:100;position:fixed;left:0;top:250px">6</div>
<div style="z-index:100;position:fixed;right:0;top:250px">3</div>
</div>
</div><div style="display: inline-block;vertical-align:top;width:350px">L2
</div><!--
--><input name="case" type="radio" id="my3" class="opt" /><div class="list" style="float:left;width:350px">
<div id="navi3">
<div style="z-index:100;position:fixed;left:0;top:300px">4</div>
<div style="z-index:100;position:fixed;right:0;top:300px">1</div>
</div>
</div><div style="display: inline-block;vertical-align:top;width:350px">R1
</div><!--
--><input name="case" type="radio" id="my1" class="opt" checked="checked" /><div class="list" style="float:left;width:0">
<div id="navi1">
<div style="z-index:100;position:fixed;left:0;top:350px">3</div>
<div style="z-index:100;position:fixed;right:0;top:350px">2</div>
</div>
</div><div style="display: inline-block;vertical-align:top;width:350px">W2
</div><!--
--><input name="case" type="radio" id="my2" class="opt" /><div class="list" style="float:right;width:350px">
<div id="navi2">
<div style="z-index:100;position:fixed;left:0;top:400px">1</div>
<div style="z-index:100;position:fixed;right:0;top:400px">5</div>
</div>
</div><div style="display: inline-block;vertical-align:top;width:350px">WQ
</div><!--
--><input name="case" type="radio" id="my5" class="opt" /><div class="list" style="float:right;width:350px">
<div id="navi5">
<div style="z-index:100;position:fixed;left:0;top:450px">2</div>
<div style="z-index:100;position:fixed;right:0;top:450px">100</span></div>
</div>
</div><div style="display: inline-block;vertical-align:top;width:70px">extra
</div><!--
--><input name="case" type="radio" id="my100" class="opt" /><div class="list" style="float:right;width:70px">
<div id="navi100">
<div style="z-index:100;position:fixed;left:0;top:500px">5</div>
</div>
</div><!--
--><div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red"><br />
</div>
<div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red"><br />
</div>
</div>
</div>
You have errors in your html. There's </span>, but I can't find any opening of that tag.
Page looks like broken. It's sooo width and empty space looks strange...
Maybe you want that, I'm just saying. That's the reason why I'll write it on simple example, not whole your code (which's hard to read and result hard to check).
#content1
{
display:none;
}
#content2
{
display:none;
}
#toggle1:checked ~ #content1
{
display: block;
}
#toggle2:checked ~ #content2
{
display: block;
}
<input type=radio id="toggle1" name="toggle">Toggle1
<input type=radio id="toggle2" name="toggle">Toggle2
<br><br>
<span id="content1">Content1</span>
<span id="content2">Content2</span>
Let's start from html. There is one important thing. input and span share the same parent in the document tree. Why it's important? Because of general sibling combinator in css.
Ok, now css.
Firstly I'm creating "starting state". #content1 and #content2 are invisible, just as you want. (I could write in css #content1, #content2 { display:none; }, that doesn't matter.)
Secondly I'm making that magic what you're trying to do. I'm using just id and it should be enough. You were using + in css, I've used ~. In my opinion – it's better when you're using element id. Even when + enough.
The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.
Quote from developer.mozilla.org
More at w3.org – general sibling combinators
Creating a minimal version of the code helps a great deal in this situation - your code seems to be right, but it's difficult to troubleshoot with so much going on:
https://jsfiddle.net/17jaf4un/4/
HTML:
<div>
<input type="checkbox" id="ch1" />
<div>
<div id="d1">first</div>
</div>
<input type="checkbox" id="ch2" />
<div>
<div id="d2">second</div>
</div>
</div>
CSS:
input#ch1:checked + div #d1 {
border: 1px solid red;
}
input#ch2:checked + div #d2 {
border: 1px solid blue;
}
Here is my own solution.
CSS:
.list {
}
.opt ~ .list {
display: none;
}
.opt:checked ~ .list {
display: block;
}
input[type="radio"]#my1:checked + div #navi1 { display: block; }
input[type="radio"]#my2:checked + div #navi2 { display: block; }
input[type="radio"]#my3:checked + div #navi3 { display: block; }
input[type="radio"]#my4:checked + div #navi4 { display: block; }
input[type="radio"]#my5:checked + div #navi5 { display: block; }
input[type="radio"]#my6:checked + div #navi6 { display: block; }
input[type="radio"]#my7:checked + div #navi7 { display: block; }
input[type="radio"]#my99:checked + div #navi99 { display: block; }
input[type="radio"]#my100:checked + div #navi100 { display: block; }
input[type="radio"]#my101:checked + div #navi101 { display: block; }
input[type="radio"]#my102:checked + div #navi102 { display: block; }
HTML:
<div id="chart" style="white-space: nowrap; position: relative; text-align: center;">
<div style="display: inline-block">
<!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my102" class="opt" /><div class="list" style="float:left;width:0">
<div id="navi102">
<div style="z-index:100;position:fixed;right:0;top:50px">101</div>
</div>
</div></DIV><div style="display: inline-block;vertical-align:top;width:70px">extra
</div><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my101" class="opt" /><div class="list" style="float:left;width:0">
<div id="navi101">
<div style="z-index:100;position:fixed;left:0;top:100px">102</div>
<div style="z-index:100;position:fixed;right:0;top:100px">7</div>
</div>
</div></DIV><div style="display: inline-block;vertical-align:top;width:350px">LQ
</div><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my7" class="opt" /><div class="list" style="float:left;width:0">
<div id="navi7">
<div style="z-index:100;position:fixed;left:0;top:150px">101</div>
<div style="z-index:100;position:fixed;right:0;top:150px">6</div>
</div>
</div></DIV><div style="display: inline-block;vertical-align:top;width:350px">L4
</div><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my6" class="opt" /><div class="list" style="float:left;width:0">
<div id="navi6">
<div style="z-index:100;position:fixed;left:0;top:200px">7</div>
<div style="z-index:100;position:fixed;right:0;top:200px">4</div>
</div>
</div></DIV><div style="display: inline-block;vertical-align:top;width:350px">L3
</div><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my4" class="opt" /><div class="list" style="float:left;width:0">
<div id="navi4">
<div style="z-index:100;position:fixed;left:0;top:250px">6</div>
<div style="z-index:100;position:fixed;right:0;top:250px">3</div>
</div>
</div></DIV><div style="display: inline-block;vertical-align:top;width:350px">L2
</div><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my3" class="opt" /><div class="list" style="float:left;width:0">
<div id="navi3">
<div style="z-index:100;position:fixed;left:0;top:300px">4</div>
<div style="z-index:100;position:fixed;right:0;top:300px">1</div>
</div>
</div></DIV><div style="display: inline-block;vertical-align:top;width:350px">R1
</div><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my1" class="opt" checked="checked" /><div class="list" style="float:left;width:0">
<div id="navi1">
<div style="z-index:100;position:fixed;left:0;top:350px">3</div>
<div style="z-index:100;position:fixed;right:0;top:350px">2</div>
</div>
</div></DIV><div style="display: inline-block;vertical-align:top;width:350px">W2
</div><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my2" class="opt" /><div class="list" style="float:right;width:0">
<div id="navi2">
<div style="z-index:100;position:fixed;left:0;top:400px">1</div>
<div style="z-index:100;position:fixed;right:0;top:400px">5</div>
</div>
</div></DIV><div style="display: inline-block;vertical-align:top;width:350px">WQ
</div><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="case" type="radio" id="my5" class="opt" /><div class="list" style="float:right;width:0">
<div id="navi5">
<div style="z-index:100;position:fixed;left:0;top:450px">2</div>
<div style="z-index:100;position:fixed;right:0;top:450px">100</div>
</div>
</div></DIV><div style="display: inline-block;vertical-align:top;width:70px">extra
</div><!--
--><input name="case" type="radio" id="my100" class="opt" /><div class="list" style="float:right;width:0">
<div id="navi100">
<div style="z-index:100;position:fixed;left:0;top:500px">5</div>
</div>
</div><!--
--><div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red"><br />
</div>
<div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red"><br />
</div>
</div>
</div>
Here's my proposition which is basically a slightly improved version of Sylogista's answer.
HTML :
<div name="tab-container">
<!-- tabs -->
<input type="radio" name="tab" id="tab1" label="Tab 1">
<input type="radio" name="tab" id="tab2" label="Tab 2">
<!-- tabs content containers -->
<div id="content1" class="tab-content"></div>
<div id="content2" class="tab-content"></div>
</div>
CSS :
/* display contents */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
display: block;
}
/* hide contents */
#tab1:checked ~ .tab-content:not(#content1),
#tab2:checked ~ .tab-content:not(#content2) {
display: none;
}
The main difference is that the css definitions for hiding and showing tab contents are only defined one time.
The showing part is almost identical while the hiding part use a more advanced combination of selectors for its right part.
This more advanded combination works as follow:
whith the .tab-content class we select all the tab contents while with :not(#id) we exclude from that selection the tab content element that is displayed and should not be hidden from the hiding rule.
You could also hide contents in an easiest way by simply copying and modifying the rules used to show them like this :
/* hide contents */
#tab1 ~ #content1,
#tab2 ~ #content2 {
display: none;
}
Modifications are the change of the display value and the removal of the :checked selector on the tabs id's.
This way all tabs contents visible and hidden states are linked to the checked state of their related tab.
If you want to try it there is this codepen whith some more explanations.
Related
It is work when the radio buttons are same div level with "content1" and "content2",
How to make it work, if I put radio button to another div that outside the div "second"
suppose that the toggle1 is checked then content1 will show up
(using CSS and HTML ONLY, no javascript)
.content1 {
display: none;
}
.content2 {
display: none;
}
.toggle1:checked ~ .grid-container .content1 {
display: block;
}
.toggle2:checked ~ .grid-container .content2 {
display: block;
}
<div class="level1">
<div class="level2">
<input type=radio id="toggle1" name="toggle" class="toggle1">
<label for="toggle1">toggle1</label>
<input type=radio id="toggle2" name="toggle" class="toggle2">
<label for="toggle2">toggle2</label>
<div>
<div>
<div class="second">
<div class="tab content1">Content1</div>
<div class="tab content2">Content2</div>
</div>
When using the general sibling combinator ~, the two elements must be "children of the same parent element." Given your existing code, apply the "grid-container" class to the <div> that is a sibling of the <input> elements.
.content1,
.content2 {
display: none;
}
.toggle1:checked ~ .grid-container .content1,
.toggle2:checked ~ .grid-container .content2 {
display: block;
}
<div class="level1">
<div class="level2">
<input type=radio id="toggle1" name="toggle" class="toggle1">
<label for="toggle1">toggle1</label>
<input type=radio id="toggle2" name="toggle" class="toggle2">
<label for="toggle2">toggle2</label>
<div class="grid-container">
<div>
<div class="second">
<div class="tab content1">Content1</div>
<div class="tab content2">Content2</div>
</div>
</div>
</div>
</div>
</div>
Explanation
I want to switch between images selecting radios, but I'd like it to be HTML/CSS only. As you can see in the code below, it does work, but in my main code the radio button and the image are within their own divs, which then this code won't work because ~ only acts if .radio-image is directly preceded by input.radio3:checked; also in my main code, the images comes before the radio button.
I also wrote an example like it'd in my main code.
Codes
working code
input.radio1:checked~.image1 {
display: block;
}
input.radio1:checked~.image2 {
display: none;
}
input.radio1:checked~.image3 {
display: none;
}
input.radio2:checked~.image2 {
display: block;
}
input.radio2:checked~.image1 {
display: none;
}
input.radio2:checked~.image3 {
display: none;
}
input.radio3:checked~.image3 {
display: block;
}
input.radio3:checked~.image1 {
display: none;
}
input.radio3:checked~.image2 {
display: none;
}
<input type="radio" name="test" class="radio1" checked/>
<input type="radio" name="test" class="radio2" />
<input type="radio" name="test" class="radio3" />
<div class="image1">
<img src="http://placehold.it/50x50">
</div>
<div class="image2">
<img src="http://placehold.it/75x75">
</div>
<div class="image3">
<img src="http://placehold.it/100x100">
</div>
main code example
input.radio1:checked~.image1 {
display: block;
}
input.radio1:checked~.image2 {
display: none;
}
input.radio1:checked~.image3 {
display: none;
}
input.radio2:checked~.image2 {
display: block;
}
input.radio2:checked~.image1 {
display: none;
}
input.radio2:checked~.image3 {
display: none;
}
input.radio3:checked~.image3 {
display: block;
}
input.radio3:checked~.image1 {
display: none;
}
input.radio3:checked~.image2 {
display: none;
}
<section class="testSection">
<div class="firstDiv">
<div class="image1">
<img src="http://placehold.it/50x50">
</div>
<div class="image2">
<img src="http://placehold.it/75x75">
</div>
<div class="image3">
<img src="http://placehold.it/100x100">
</div>
</div>
<div class="secondDiv">
<form class="testForm">
<div class="thirdDiv">
<div class="inputDiv">
<input type="radio" name="test" class="radio1" checked />
</div>
<div class="inputDiv">
<input type="radio" name="test" class="radio2" />
</div>
<div class="inputDiv">
<input type="radio" name="test" class="radio3" />
</div>
</div>
</form>
</div>
</section>
Thanks in advance,
Luiz.
May be i don't understand fully plus selector,
What i want, when user click on radio button home, div one should get displayed,
and when user click on radio button about, div two should get displayed, it did not work,
So i strip down the code, where is the problem, with this code i accepted div one to get displayed as home is by default checked. But it did not happened, so i know where is the problem but i dont know why,
Please read the comment, in the code, as i said which line is giving the problem hint it's css last section,
HTML CODE
<div class="container">
<input type="radio" name="option" id="home" checked />
<input type="radio" name="option" id="about" />
<div class="navigation">
<label for="home" class="link">Home</label>
<label for="about" class="link">About Us</label>
</div>
<div class="display">
<div class="one">
<h3>This is first</h3>
</div>
<div class="two">
<h3>This is second</h3>
</div>
</div>
</div>
CSS CODE
.navigation {margin-top:20px;}
.link{cursor:pointer;}
/*making div display*/
.one,.two{
display:none;
}
/*
###This line is not working## want to display div, if user click on radio
button
*/
#home:checked +.container > .one{
display:block;
}
if you want to run the code here is the code pen link https://codepen.io/arif_suhail_123/pen/KvdWey
.container is not a sibling of #home.
To select the element in question, when #home is checked, you can use the ~, which is the general sibling selector:
#home:checked ~ .display > .one
.navigation {margin-top:20px;}
.link {cursor:pointer;}
.one, .two {
display:none;
}
#home:checked ~ .display > .one {
display:block;
}
#about:checked ~ .display > .two {
display: block;
}
<div class="container">
<input type="radio" name="option" id="home" checked />
<input type="radio" name="option" id="about" />
<div class="navigation">
<label for="home" class="link">Home</label>
<label for="about" class="link">About Us</label>
</div>
<div class="display">
<div class="one">
<h3>This is first</h3>
</div>
<div class="two">
<h3>This is second</h3>
</div>
</div>
</div>
The + is the adjacent sibling combinator. Which requires:
The elements to be siblings
The selector on the left of + is the first positioned element
The selector on the right of + is the selector that follows.
There must be no other elements between them.
In the following demo:
Each radio was moved in front of the div it's associated with.
Each radio is display:none since there's no need to show them because the interface are the labels.
Demo
input[name='option'],
.one,
.two {
display: none
}
#home:checked+.one {
display: block;
}
#about:checked+.two {
display: block;
}
<div class="container">
<div class="navigation">
<label for="home" class="link">Home</label>
<label for="about" class="link">About Us</label>
</div>
<div class="display">
<input type="radio" name="option" id="home" checked />
<div class="one">
<h3>This is first</h3>
</div>
<input type="radio" name="option" id="about" />
<div class="two">
<h3>This is second</h3>
</div>
</div>
</div>
I believe for the plus operator to work the element has to be the immediate next sibling - So in this case the .one div would have to immediately follow the #home label, and the css would have to be:
#home:checked + .one{
display:block;
}
The html:
<div class="container">
<input type="radio" name="option" id="home" checked />
<div class="one">
<h3>This is first</h3>
</div>
<input type="radio" name="option" id="about" />
...
+ Selector : The element+element selector is used to select elements that is placed immediately after (not inside) the first specified element.
~ Selector : The element1~element2 selector matches occurrences of element2 that are preceded by element1.
So,you must use ~ instead of +.
.navigation {
margin-top:20px;
}
.link{
cursor:pointer;
}
.one,.two{
display:none;
}
#home:checked ~ .display > .one{
display:block;
}
#about:checked ~ .display > .two{
display:block;
}
<div class="container">
Home: <input type="radio" name="option" id="home" checked />
About: <input type="radio" name="option" id="about" />
<div class="navigation">
<label for="home" class="link">Home</label>
<label for="about" class="link">About Us</label>
</div>
<div class="display">
<div class="one">
<h3>This is first</h3>
</div>
<div class="two">
<h3>This is second</h3>
</div>
</div>
</div>
The order of elements is important when using this selector.
So to use the ~ operator the element should be after the first part.
Ex.
input[type=radio]:checked ~ label {
display: none;
}
The Html should be:
<div class="radio-groupe">
<input type="radio" name="water" id="choice-2" value="more-than-8-cups-a-day">
<label for="choice-2">More</label>
</div>
and not:
<div class="radio-groupe">
<label for="choice-2">More</label>
<input type="radio" name="water" id="choice-2" value="more-than-8-cups-a-day">
</div>
My HTML :
<div id="contentapp">
<input type="radio" name="menu" id="interest" checked>
<input type="radio" name="menu" id="about">
<div id="tab">
<label for="interest">Interest</label>
<label for="about">About</label>
</div>
<div id="content">
<article class="interest">
Interest
</article>
<article class="about">
About
</article>
</div>
</div>
My CSS :
#contentapp article {
display: none;
}
#contentapp input#interest:checked ~ article.interest{
display: block;
}
this is my problem . . . : how to do it in correct way for activate display block when radio button clicked ?
You have a div between contentapp and article. This means, you should use it in your css as well
#contentapp div article {
display: none;
}
#contentapp input#interest:checked ~ div article.interest{
display: block;
}
EDIT: Here a jsfiddle: https://jsfiddle.net/634ctoxw/
Try the below one:
#contentapp #content article {
display: none;
}
input#interest:checked ~ #content article.interest{
display: block;
}
You need to handle the ID properly.
Use the following code:
$(document).on('click', "input[type='radio']", function(){
$('#contentapp article').hide();
var id = $(this).attr('id');
$('.' + id).show();
});
#contentapp article {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentapp">
<input type="radio" name="menu" id="interest" checked>
<input type="radio" name="menu" id="about">
<div id="tab">
<label for="interest">Interest</label>
<label for="about">About</label>
</div>
<div id="content">
<article class="interest">
Interest
</article>
<article class="about">
About
</article>
</div>
</div>
I am creating tabs using CSS only. The way it works is, there are 3 radio buttons, and a label for each radio button. The tab contents are set to display: none. When a tab gets selected, then that tab contents become display: block
Since there were white spaces separating the labels (tabs) I added a div around the input/label elements and used the Flexbox technique.
Now that I added the div around the inputs/labels, the tab contents never show, they never become display: block.
How can I make the tab contents show when a tab gets selected?
Here's the relevant code:
.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
display: block;
}
Working, but with white space
JSFiddle
.tab {
background-color: yellow;
display: inline-block;
width: calc(100% / 3);
height: 50px;
outline: 1px green solid;
}
.tabContent,
input {
display: none;
}
.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
display: block;
}
<div id="overallDiv">
<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
<label for="rad1" class="tab">Fisrt Tab</label>
<input type="radio" name="tabGroup1" id="rad2" class="tab2" />
<label for="rad2" class="tab">Second Tab</label>
<input type="radio" name="tabGroup1" id="rad3" class="tab3" />
<label for="rad3" class="tab">Third Tab</label>
<div class="tabContent tab1" id="first">
First Tab
</div>
<div class="tabContent tab2" id="second">
Second Tab
</div>
<div class="tabContent tab3" id="third">
Third Tab
</div>
</div>
Not Working, but now white spaces
JSFiddle
.tab {
background-color: yellow;
display: inline-block;
width: calc(100% / 3);
height: 50px;
outline: 1px green solid;
}
.tabContent,
input {
display: none;
}
.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
display: block;
}
<div id="overallDiv">
<div id="tabWrapper" style="display: flex;">
<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
<label for="rad1" class="tab">Fisrt Tab</label>
<input type="radio" name="tabGroup1" id="rad2" class="tab2" />
<label for="rad2" class="tab">Second Tab</label>
<input type="radio" name="tabGroup1" id="rad3" class="tab3" />
<label for="rad3" class="tab">Third Tab</label>
</div>
<div class="tabContent tab1" id="first">
First Tab
</div>
<div class="tabContent tab2" id="second">
Second Tab
</div>
<div class="tabContent tab3" id="third">
Third Tab
</div>
</div>
As inline element have a space margin, your div becomes a little bigger than 33% and therefore doesn't fit in 1 row.
To your Working, but with white space sample I added margin-right: -4px; re-ordered your html a little to take that space out, but this can be done using other hacks, floats and flex. (for floats/flex, see below)
The trick in this case is to make the inline elements stop and start tag to be on the same line like this: </label><label
Note: These margin space issues has already been solved before
How to remove the space between inline-block elements?
Why is there an unexplainable gap between these inline-block div elements?
.tab {
background-color: yellow;
display: inline-block;
width: calc(100% / 3);
height: 50px;
outline: 1px green solid;
}
.tabContent,
input {
display: none;
}
.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
display: block;
}
<div id="overallDiv">
<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
<input type="radio" name="tabGroup1" id="rad2" class="tab2" />
<input type="radio" name="tabGroup1" id="rad3" class="tab3" />
<label for="rad1" class="tab">First Tab
</label><label for="rad2" class="tab">Second Tab
</label><label for="rad3" class="tab">Third Tab
</label>
<div class="tabContent tab1" id="first">
First Tab
</div>
<div class="tabContent tab2" id="second">
Second Tab
</div>
<div class="tabContent tab3" id="third">
Third Tab
</div>
</div>
As requested a flex version.
#overallDiv {
display: flex;
flex-wrap: wrap;
}
.tab {
background-color: yellow;
width: calc(100% / 3);
height: 50px;
outline: 1px green solid;
}
.tabContent,
input {
display: none;
}
.tabContent {
width: 100%;
}
.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
display: block;
}
<div id="overallDiv">
<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
<label for="rad1" class="tab">Fisrt Tab</label>
<input type="radio" name="tabGroup1" id="rad2" class="tab2" />
<label for="rad2" class="tab">Second Tab</label>
<input type="radio" name="tabGroup1" id="rad3" class="tab3" />
<label for="rad3" class="tab">Third Tab</label>
<div class="tabContent tab1" id="first">
First Tab
</div>
<div class="tabContent tab2" id="second">
Second Tab
</div>
<div class="tabContent tab3" id="third">
Third Tab
</div>
</div>
Edit
Here is a "floats" version
#overallDiv {
clear: left;
}
.tab {
background-color: yellow;
float: left;
width: calc(100% / 3);
height: 50px;
outline: 1px green solid;
}
.tabContent,
input {
display: none;
}
.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
display: block;
}
<div id="overallDiv">
<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
<label for="rad1" class="tab">First Tab</label>
<input type="radio" name="tabGroup1" id="rad2" class="tab2" />
<label for="rad2" class="tab">Second Tab</label>
<input type="radio" name="tabGroup1" id="rad3" class="tab3" />
<label for="rad3" class="tab">Third Tab</label>
<div class="tabContent tab1" id="first">
First Tab
</div>
<div class="tabContent tab2" id="second">
Second Tab
</div>
<div class="tabContent tab3" id="third">
Third Tab
</div>
</div>
There are a couple of methods to remove whitespace. Here's a good article on a couple of methods https://davidwalsh.name/remove-whitespace-inline-block. If you don't want your html to become messy you could add a font-size of 0 to the parent element, then if you have text in the child elements add a font-size to them. Your CSS would look like this:
parent element:
#overallDiv {
font-size: 0;
}
child elements:
.tabs {
font-size: 14px;
}
Here's a jsfiddle.