I am trying to make a collapsible button with pure HTML and CSS. Here is what I have:
#hidden {
display: none;
height: 100px;
background: red;
}
:checked+#hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>
This works. However, I want the hidden div to come after the button instead of before. When I move the div to after the checkbox label, it does not work.
How can I fix this ?
Thanks!
You want to use a different CSS selector. The below uses the General sibling combinator to target the div no matter its order with respect to the input element (so long as it follows it).
#hidden {
display: none;
height: 100px;
background: red;
}
:checked ~ #hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>
use negation instead of +, so that it will select all divs related to that class name
#hidden {
display: none;
height: 100px;
background: red;
}
:checked~#hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>
Related
I'd like to create a collapsible button highlighted as href for my academic website, and got an answer here: HTML Collapsible Button - How to highlight the button as href?
However, when I create more than one buttons, the top button opens all the hidden texts (please see my code below). Could I modify the code so that each button only opens the hidden text just below it, or opens a specified hidden text?
CSS:
label {
color: blue;
}
label:hover {
text-decoration: underline;
cursor: pointer; }
#hidden {
display: none;
}
:checked~#hidden {
display: block;
}
Html:
<input type="checkbox" id="my_checkbox" style="display:none;">1st paper title.
<label for="my_checkbox">Abstract</label>
<div id="hidden">1st abstract</div>
<br>
<input type="checkbox" id="my_checkbox2" style="display:none;">2nd paper title.
<label for="my_checkbox2">Abstract</label>
<div id="hidden">2nd abstract</div>
The same id can be used one time per page. So we have to use class instead of id. Also we should use Adjacent sibling combinator instead of General sibling combinator
label {
color: blue;
}
label:hover {
text-decoration: underline;
cursor: pointer; }
.hidden {
display: none;
}
input:checked+label+.hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">1st paper title.
<label for="my_checkbox">Abstract</label>
<div class="hidden">1st abstract</div>
<br>
<input type="checkbox" id="my_checkbox2" style="display:none;">2nd paper title.
<label for="my_checkbox2">Abstract</label>
<div class="hidden">2nd abstract</div>
Yes, provided the HTML structure is reliable and consistent.
Change:
:checked~#hidden {
display: block;
}
to
:checked + label + #hidden {
display: block;
}
However, you can't have multiple items with the same id attriubte - use a class instead.
I have a very basic checkbox hack I'm using for selecting different items.
It does exactly what I want it to do: namely, clicking on the label allows me to select the corresponding figure:
input[type="checkbox"] { display:none; }
.wrap { width: 50%; }
.wrap label { display: inline-block;}
.checker {background: red; padding: 50px;}
.checker figure { margin: 10px; display: inline-block; position: relative;}
.wrap input { display: none; }
.wrap input:checked ~ .checker { display: none; }
.wrap input:checked + label { color: blue; }
.wrap #check1cont:checked ~ .check1 {display: inline-block;}
.wrap #check2cont:checked ~ .check2 {display: inline-block;}
<div class="wrap">
<input type="checkbox" name="cont" id="check1cont">
<label class="check1cont" for="check1cont">Check 1</label>
<input type="checkbox" name="controllers" id="check2cont">
<label class="check2cont" for="check2cont">Check 2</label>
<figure class="checker check1">CHECK 1</figure>
<figure class="checker check2">CHECK 2</figure>
</div>
But I want the controllers/labels to be aligned on the left side, with the figures on the right. Ideally, I'd like to be able to do this with flex, so the labels are housed in a responsive, left-aligned div.
I've tried adding the divs with different sibling and child selectors, but I'm new to all of this, and I don't think I've gotten the right combination (or else I'm doing something else wrong, or else it's impossible).
Can anyone recommend a means of doing this?
Thank you in advance.
The hidden checkbox tricks works because the checkboxes themselves can be anywhere in relation to the labels. So put the checkboxes first, and the labels in a separate container following them, and you can control both the labels and the figures with the :checked state of the checkboxes.
.wrap { display:flex; width:50%; vertical-align:top;}
.wrap aside {vertical-align:top;}
.wrap label {white-space:nowrap; display: block;}
.checker {background: red; padding: 50px; vertical-align:top;}
.checker {margin: 10px; display: inline-block; position: relative;}
.wrap input { display: none; }
input:checked ~ main .checker { display: none; }
#check1cont:checked ~ aside .check1cont,
#check2cont:checked ~ aside .check2cont { color: blue; }
#check1cont:checked ~ main .check1,
#check2cont:checked ~ main .check2 {display: inline-block;}
<div class="wrap">
<input type="checkbox" name="cont" id="check1cont">
<input type="checkbox" name="controllers" id="check2cont">
<aside>
<label class="check1cont" for="check1cont">Check 1</label>
<label class="check2cont" for="check2cont">Check 2</label>
</aside>
<main>
<figure class="checker check1">CHECK 1</figure>
<figure class="checker check2">CHECK 2</figure>
</main>
</div>
Note: as was remarked in the comments, the code is a simplification of the real code, so I had to clean up the css a bit. You probably have to un-clean it up to make it work for the real code again!
I hate css, I really do. I think this one will be trivial for most of you so please help me with this one.
I would like to create a radiobutton which have to change the background color of the label it's in. Here's the code which obviously does not work:
js:
<div className="container">
<label className="check" htmlFor="id">
<input {...radio.input} name="radio" type="radio" id="id" />
</label>
</div>
and css:
.check {
background-color: green;
display: inline-block;
height: 34px;
position: relative;
width: 60px;
cursor: pointer;
}
.check input {
display:none;
}
input[type="radio"]:checked + .check {
background-color: blue;
}
.container {
margin: 0 auto;
}
The + selector in CSS selects the next element in the HTML. Doing input + label is not going to work because your input is wrapped in the label.
The easiest solution for this would be to apply a checked CSS class in react when the input is checked. The other option would be to place the label AFTER the input in your markup, but that will probably require you to apply more CSS to get the appearance you need.
I really love CSS, I really do! ;)
Change your HTML to:
<div className="container">
<input {...radio.input} name="radio" type="radio" id="id" />
<label className="check" htmlFor="id">
</label>
</div>
and style the radio button individually.
I am trying to close a div when a checkbox is clicked with css only not JQuery or Javascript but it seems not working properly. How can I adjust it?
div[id^="div-"] {
display: block;
}
div[id^="div-"]:target {
display: none;
}
<input type="checkbox" checked>
<div id="div-1">
Here is the content.
</div>
How can I link the <a> click and the checkbox?
I think the only way to do this with pure css would be to have the checkbox as a direct sibling to the div:
#div-1 {display:none}
#checkbox:checked + #div-1 {display:block;}
<input id="checkbox" type="checkbox" checked>
<div id="div-1">
Here is the content.
</div>
#text{
width:100px;
height:100px;
background:black;
}
input[type=checkbox]:checked ~ #text{
display:none;
}
<input type="checkbox" name="check" value="checked">Click here<br>
<div id="text"></div>
Using only CSS you can do something like this.
JSFiddle
The + is the adjacent sibling selector, more info at https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors
#close + #div-1 {
display: none;
}
#close:checked + #div-1 {
display: initial;
}
<input id="close" type="checkbox" checked />
<div id="div-1">Here is the content.</div>
First you should remove the anchor and just let the input element because this trick that i'm showing needs elements in the same level or the second element be in lower levels of html structure.
<input type="checkbox" checked>
<div id="div-1">
Here is the content.
</div
css
div[id^="div-"] {
display: block;
}
input:checked ~ div[id^="div-"] {
display: none;
}
jsfiddle
I have a radio button which id is someID-1 and a div which id is navi1.
<input name="nappi" type="radio" id="someID-1" />
<div>
<div id="navi1">
<div style="z-index:100;position:fixed;right:0;top:0;bottom:0;">
<label for="someID-2">2</label>
</div>
</div>
</div>
This CSS code works just fine:
div[id^="navi"] {
display: none;
}
But this does not work OK:
input#someID-1:checked #navi1 {
display: block;
}
How should I modify the code?
I have tens of radio buttons (id names between someID-1 and someID-99). I would like to have dynamic code.
I do not want to use JavaScript.
You can make like this. you can read the details of the selector that i used here
#navi1{
display: none;
}
input[type="radio"]#someID-1:checked + div #navi1{
display: block;
}
.box{
border: 1px solid #ddd;
width: 200px;
height: 200px;
text-align: center;
}
<input name="nappi" type="radio" id="someID-1" />
<div class="box">
<div id="navi1">
<div>
<label for="someID-2">2</label>
</div>
</div>
</div>
You need to navigate the document hierarchy correctly in your CSS. So this works:
div[id^="navi"]
{
display: none;
}
#someID-1:checked + div div {
display:block;
}