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>
Related
i want to hide all content, i want them to show when checked
like show content when checkbox checked
hide when unchecked so that when i check others they show up too
here is my try but its not working
<style>
#myBike:not(:checked) +#bike {
display: block !important;
}
#myCar:not(:checked) +#car {
display: block !important;
}
</style>
<input type="checkbox" id="myBike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="myCar">
<label for="vehicle2"> I have a car</label><br>
<div class="row" id="bike">
Something for bike
</div>
<div class="row" id="car">
Something for car
</div>
Please check the code below.
#bike {
display: none;
}
#myBike:checked~#bike {
display: block;
}
#car {
display: none;
}
#myCar:checked~#car {
display: block;
}
<input type="checkbox" id="myBike" />
<label for="vehicle1">I have a bike</label>
<input type="checkbox" id="myCar" />
<label for="vehicle2">I have a car</label>
<div class="row" id="bike">Something for bike</div>
<div class="row" id="car">Something for car</div>
Expanation:
You have used a wrong syntax ~ vs +
By default all div are set as display:block. You should set display:none as its initial.
I made a label because I wanted to apply css to the checkbox.
However, the label is not working except for the checkbox whose id is 'checkall'.
<div class="divCenter cartDiv">
<ul>
<li class="selectallforcart">
<div class="hanadiv">
<input type="checkbox" id="checkall" class="check" value="0"/>
<label for="checkall"></label> selelct All
</div>
</li>
</ul>
<% ArrayList<LikePdVO> likeList = (ArrayList<LikePdVO>)(request.getAttribute("likeList"));
for(LikePdVO vo : likeList) {
String arr[] = vo.getPhoto().split("\\*");
%>
<div class="cartProduct" id="<%=vo.getPd_id()%>">
<div class="fl cartCheck">
<input type="checkbox" class="check" name="<%=vo.getName()%>"
value="<%=vo.getOrder_price()%>" id="<%=vo.getPd_id()%>">
<label for="<%=vo.getPd_id()%>">
</label>
</div>
this is my code.
.cartDiv input[type=checkbox] + label {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #bcbcbc;
cursor: pointer;
}
.cartDiv input[type=checkbox]:checked + label {
background-color: #866744;
}
.cartDiv input[type=checkbox] {
display: none;
}
And this is CSS.
When you mean that the label is not working, I assume you mean that clicking on it doesn't cause the checkbox to be checked?
Either way, the label's text needs to be within the element, so it should be:
<label for="checkall">Select all</label>
And your other labels contain no text, so the label itself is probably quite small, despite the CSS, and therefore not clickable.
You need to set label text in the label tag not out side of it.
<div class="divCenter cartDiv">
<ul>
<li class="selectallforcart">
<div class="hanadiv">
<input type="checkbox" id="checkall" class="check" value="0" />
<label for="checkall">selelct All</label>
</div>
</li>
</ul>
</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 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.
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.