I need to make a kind of fake navigation that shows diferents sections when clicking on elements of a list...but no javascript is allowed.
I have make this approach
<style type="text/css">
body {
display: block;
}
#closquer {
display: inline-block;
}
:nth-child(1):focus ~ #lotext {
display: block;
}
#lotext {
display: none
}
</style>
</head>
<body>
<ul id="closquer">
<li class="span3" tabindex="0">Section 1</li>
</ul>
<div id="lotext">Text Section 1</div>
This don't work, because the elements are no adjacent
see demo
By the way if elements are adjacent..it works
<style type="text/css">
body {
display: block;
}
#closquer {
display: inline-block;
}
:nth-child(1):focus ~ #lotext {
display: block;
}
#lotext {
display: none
}
</style>
</head>
<body>
<ul id="closquer">
<li class="span3" tabindex="0">Section 1</li>
<p id="lotext">Text Section 1</p>
</ul>
See other demo
Is there a way to show/hide non adjacent elements with css3?
you can use the powerful target for this like the following :
section:not(:target) > a {
background-color: #ccc;
}
section:target > a {
background-color: white;
border-bottom-color: #fff;
}
section:not(:target) > div { z-index: -2; }
section:target > div { z-index: -1; }
here is an exemple I made it for you :
Live DEMO
label and input can be used too, it can allow to open a few boxe :
#a:checked ~#boxA,
#b:checked ~#boxB,
#c:checked ~#boxC,
#d:checked ~#boxD,
#e:checked ~#boxE,
#f:checked ~#boxF,
#ab:checked ~#boxeA,
#bb:checked ~#boxeB,
#cb:checked ~#boxeC,
#db:checked ~#boxeD,
#eb:checked ~#boxeE,
#fb:checked ~#boxeF
{display:block;}
div, input {
float:left;
border:solid;
display:none;
}
nav ~ nav ~div {float:none;}
label {margin:1em;}
hr {clear:both;}
#a:checked ~ nav [for="a"],
#b:checked ~ nav [for="b"],
#c:checked ~ nav [for="c"],
#d:checked ~ nav [for="d"],
#e:checked ~ nav [for="e"],
#f:checked ~ nav [for="f"],
#ab:checked ~nav [for="ab"],
#bb:checked ~nav [for="bb"],
#cb:checked ~nav [for="cb"],
#db:checked ~nav [for="db"],
#eb:checked ~nav [for="eb"],
#fb:checked ~nav [for="fb"]
{color:red}
<!-- checkbox allow multiple selection -->
<input id="a" type="checkbox" /><input id="b" type="checkbox" /><input id="c" type="checkbox" /><input id="d" type="checkbox" /><input id="e" type="checkbox" /><input id="f" type="checkbox" />
<nav><label for="a">box A</label><label for="b">box B</label><label for="c">box C</label><label for="d">box D</label><label for="e">box E</label><label for="f">box F</label></nav>
<div id="boxA"> Box A to show or hide</div>
<div id="boxB"> Box B to show or hide</div>
<div id="boxC"> Box C to show or hide</div>
<div id="boxD"> Box D to show or hide</div>
<div id="boxE"> Box E to show or hide</div>
<div id="boxF"> Box F to show or hide</div>
<hr/>
<!-- radio and name attributes allow 1 or more selection-->
<input id="ab" type="radio" name="box" /><input id="bb" type="radio" name="box" /><input id="cb" type="radio" name="box" /><input id="db" type="radio" name="box" /><input id="eb" type="radio" name="box" /><input id="fb" type="radio" name="boxextra" />
<nav><label for="ab">boxe A</label><label for="bb">boxe B</label><label for="cb">boxe C</label><label for="db">boxe D</label><label for="eb">boxe E</label><label for="fb">boxe F as extra</label></nav>
<div id="boxeA"> Boxe A to show or hide</div>
<div id="boxeB"> Boxe B to show or hide</div>
<div id="boxeC"> Boxe C to show or hide</div>
<div id="boxeD"> Boxe D to show or hide</div>
<div id="boxeE"> Boxe E to show or hide</div>
<div id="boxeF"> Boxe F to show or hide</div>
Unlike :target methode, it will not take the focus.
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>
I am using this code. I would also like when it is the display: block the color of the label changes.
label.divcheck { color:blue; text-decoration:underline; }
input.divcheck { display:none; }
input.divcheck + div { display:none; }
input.divcheck:checked + div { display:block;}
<label class="divcheck" for="navigation">Button Nav</label>
<label class="divcheck" for="other">Button Other</label>
<input type="checkbox" class="divcheck" id="navigation"/>
<div class="navigation">
Foo
</div>
<input type="checkbox" class="divcheck" id="other"/>
<div class="navigation">
Other
</div>
https://stackoverflow.com/a/35781115/15949286
The only way to do this without using JavaScript is to parse the label elements and position them after the input. The example for this is as follows.
label.divcheck {
color: blue;
text-decoration: underline;
}
input.divcheck {
display: none;
}
input.divcheck~div {
display: none;
}
input.divcheck:checked~div {
display: block;
}
input.divcheck:checked~label.divcheck {
color: red;
}
section {
display: flex;
}
<section>
<div>
<input type="checkbox" class="divcheck" id="other" />
<label class="divcheck" for="other">Button Other</label>
<div class="navigation">
Foo
</div>
</div>
<div>
<input type="checkbox" class="divcheck" id="navigation" />
<label class="divcheck" for="navigation">Button Nav</label>
<div class="navigation">
Other
</div>
</div>
</section>
I'm trying to do what I thought would be a fairly simple, hide/reveal. If the box is checked, the text shows, if not it is hidden. I just can't seem to get it to work. I appreciate any insight. Thanks
.nav-trigger:checked ~ .Nav-Wrap {
display: block;
}
.Nav-Wrap {
display: none;
}
<div id="menuButton">
<input title="Display Menu" type="checkbox" name="displayMenu" value="yes" id="nav-trigger" class="nav-trigger" />
<label title="Display Menu" for="nav-trigger"></label>
</div>
<p class="Nav-Wrap">Test</p>
Your selector .nav-trigger:checked ~ .Nav-Wrap is not matching your current markup.
Try to place the p within the div, this should do the trick
.nav-trigger:checked ~ .Nav-Wrap {
display: block;
}
.Nav-Wrap {
display: none;
}
<div id="menuButton">
<input title="Display Menu" type="checkbox" name="displayMenu" value="yes" id="nav-trigger" class="nav-trigger" />
<label title="Display Menu" for="nav-trigger"></label>
<p class="Nav-Wrap">Test</p>
</div>
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>
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.