I'm setting up checkbox in a side navigation fashion in my html pages, I want the check box to display content upon selection. Example: Choose checkbox 1,2 display content only of that, No checkbox selected display all content.. How can i do this without Jquery/javascript. I want my webpage to maintain same functionality even if Javascript in browser is disabled. Can i do this by including w3.css as these styles are responsive without involving bootstrap
1
-
1Possible duplicate of Show hide divs on click in HTML and CSS without jQuerygael– gael2019-05-27 14:18:57 +00:00Commented May 27, 2019 at 14:18
Add a comment
|
2 Answers
Below code has id for different checkbox and for there contents , onclick of any checkboxthat content will be display:
#content {
display: none;
}
#show:checked ~ #content {
display: block;
}
#content1 {
display: none;
}
#show1:checked ~ #content1 {
display: block;
}<input type="checkbox" id="show">
<label for="show">check1</label>|
<input type="checkbox"id="show1">
<label for="show1">check2</label>
<span id="content">jvdkvdkvjdl</span>
<span id="content1">dkjvvhjvhkjdklhdlvk</span>10 Comments
Xhalini
Although you have given input type="checkbox" why doesn't it show the checkbox to tick or untick?
Swati
Because i have given
display:none to both checkboxes, See updated code i have change it .Xhalini
Oh, Yes got that. Is it possible to sort the checkboxes alphabetically? If suppose it check1 and alphacheck 1. I want alphacheck1 to be displayed first?
Xhalini
No, I meant without JS
|
I would advise you to learn the ":checked" selector. Here is a simple example.
HTML
<label for="trigger">Toggle box</label>
<div>
OTHER HTML CONTENT
</div>
<input id="trigger" type="checkbox">
<div class="box">
SHOW / HIDE BOX
</div>
CSS
.box {
display: none;
background: #ccc;
width: 200px;
height: 100px;
}
#trigger {
display: none;
}
#trigger:checked + .box {
display: block;
}
As you can see the ":checked" selector can show or hide the DIV block. Here is an interesting article on this topic.
