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.
Related
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>
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.
It looks like when checkbox is wrapped by a label element, we can still toggle it even if we have set the display property to none.
label input {
display: none;
}
label span.y {
display: none;
}
label span.n {
display: inline;
}
label input:checked~span.y {
display: inline;
}
label input:checked~span.n {
display: none;
}
<label>
<input type="checkbox">
<span class="y">Checked!</span>
<span class="n">Click me!</span>
</label>
it confuses me a lot, i'll appreciate it if you can explain it for me
as per on w3cschool - label provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control.
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 custom checkboxes I styled like buttons. When you click the label or input the div around it changes color. However, only the label and input are clickable.
Is there a way to make the entire div/button clickable (i.e. everything inside the border)?
Here's my code:
div.label {
border:solid 1px gray;
line-height:40px;
height:40px;
width: 250px;
border-radius:40px;
-webkit-font-smoothing: antialiased;
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
color:gray;
text-align:center;
}
label {
display:inline;
text-align:center;
}
input[type=checkbox] {
display: none;
}
input:checked + div {
border: solid 1px red;
color: #F00;
}
input:checked + div:before {
content: "\2713";
}
<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<div class="label">
<label for="lists[Travel]">Travel</label> <br>
</div>
The answer is quite symple: you don't need an additional div-element. Actually you can place a label-element wherever you want and associate it with an input-element of your choice.
You do so by giving the input-element an id-attribute and associate the label-element with a corresponding for-attribute.
eg: <input id="my-input-id">[...]<label for="my-input-id">Label Text</label>)
A <label> can be associated with a control either by placing the control element inside the element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.
Labels are not themselves directly associated with forms. They are only indirectly associated with forms through the controls with which they're associated.
When a <label> is clicked or tapped, and it is associated with a form control, the resulting click event is also raised for the associated control.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
label {
display:block;
border:solid 1px gray;
line-height:40px;
height:40px;
width: 250px;
border-radius:40px;
-webkit-font-smoothing: antialiased;
margin-top:10px;
font-family:Arial,Helvetica,sans-serif;
color:gray;
text-align:center;
}
input[type=checkbox] {
display: none;
}
input:checked + label {
border: solid 1px red;
color: #F00;
}
input:checked + label:before {
content: "\2713 ";
}
/* new stuff */
.check {
visibility: hidden;
}
input:checked + label .check {
visibility: visible;
}
input.checkbox:checked + label:before {
content: "";
}
<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<label for="lists[Travel]">Travel with jump</label>
<!-- alternatively avoid jumps between text of state checked and unchecked -->
<input class="checkbox" id="lists[new]" type="checkbox" name="lists[new]" />
<label for="lists[new]"><span class="check">✓</span> Travel without jump</label>
In addition you can fiddle around with the display: block of the <label>.
But this should be quite simple by giving it float: left, display: inline-block or whatever to get the desired elements float.
CODEPEN
Here's a one way to achieve this:
<div onclick="this.querySelector('input[type=checkbox]').click()">
<input type="checkbox" style="pointer-events:none">
<span>Label</span>
</div>
Or if you give the checkbox an id:
<div onclick="abc.click()">
<input id="abc" type="checkbox" style="pointer-events:none">
<span>Label</span>
</div>
You need pointer-events:none in this appraoch because otherwise a double-click (causing check and uncheck) happens when you click on the checkbox directly.