Checkbox display content without using HTML and CSS only (no JS)

Question

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

Possible duplicate of [Show hide divs on click in HTML and CSS without jQuery](https://stackoverflow.com/questions/19170781/show-hide-divs-on-click-in-html-and-css-without-jquery) — gael, May 27 '19 at 14:18

Swati · Accepted Answer · 2019-05-28T16:45:08.383

1

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>

edited May 28 '19 at 16:45

answered May 27 '19 at 14:28

Swati

28,069
4
21
41

Although you have given input type="checkbox" why doesn't it show the checkbox to tick or untick? – Xhalini May 28 '19 at 16:22
Because i have given `display:none` to both checkboxes, See updated code i have change it . – Swati May 28 '19 at 16:45
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 May 28 '19 at 16:59
Yes it is possible ,check [this](https://stackoverflow.com/questions/15670153/alphabetical-checkbox-input-type) out . – Swati May 28 '19 at 17:07
No, I meant without JS – Xhalini May 28 '19 at 17:16
The usage of span doesn't work when I Place the checkboxes vertically. Why is it so? – Xhalini May 29 '19 at 09:29
can you elaborate it or try to post new question . – Swati May 29 '19 at 16:06
No I meant, the solution you gave me was having the checkboxes in a horizontal diasplay likke Chekbox1 | Checkbox2 but when I try to do the same vertically it doesn't work like Checkbox1 Checkbox2 – Xhalini May 30 '19 at 06:45
it is working i have recheck at my side it worked , can you should your code ? – Swati May 30 '19 at 07:20
It worked for me as well.. Thank you for your on-time response and great solution – Xhalini Jun 05 '19 at 08:38

score 1 · Answer 2 · answered May 27 '19 at 14:32

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.

Checkbox display content without using HTML and CSS only (no JS)

2 Answers2