using css to show hide content given its id - css

Question

with only css, how would one show/hide a div knowing its id?
with jQuery it would have been simple and even simpler with vanilla javascript, but how to do this with just css?
the checkbox hack needs to have a specific structure to work
also, I'd like it to only hide the div before the next h1, if there were any.
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
p {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked + div {
display: block;
}
input[type=checkbox]:checked ~ label:after {
content: " [hide]"
}
<h1>
Vampires and Vegetarians
<label for="Vampires_and_Vegetarians"></label>
</h1>
<input type="checkbox" id="Vampires_and_Vegetarians">
<div id="Vampires_and_Vegetarians">
<p>Content for Vampires and Vegetarians</p>
</div>

Answer 1

In order for your checkbox to control things, it has to appear before it in the dom so I've moved it to the very top.
I've also changed your CSS a little, you were hiding the p and then trying to show the div now we're hiding the div then showing it.
I've also changed you + to a ~ as the div was not a direct sibling.
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked~h1 label:after {
content: " [hide]"
}
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
input[type=checkbox]~div {
display: none;
}
input[type=checkbox]:checked~div {
display: block;
}
<section>
<input type="checkbox" id="Vampires_and_Vegetarians">
<h1>
Vampires and Vegetarians
<label for="Vampires_and_Vegetarians"></label>
</h1>
<div id="Vampires_and_Vegetarians">
<p>Content for Vampires and Vegetarians</p>
</div>
</section>
<section>
<input type="checkbox" id="Zombies_and_Zucchini">
<h1>
Zombies and Zucchini
<label for="Zombies_and_Zucchini"></label>
</h1>
<div id="Zombies_and_Zucchini">
<p>Content for Zombies and Zucchini</p>
</div>
</section>
I hope you find this helpful 🙂
Feel free to ask for clarification.

Answer 2

You will need to change the hierarchy of the elements here like below. Because ~ is used to target the next siblings elements not the previous one. Also don't use the same id twice
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
.content {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked~.content {
display: block;
}
input[type=checkbox]:checked~h1 label:after {
content: " [hide]"
}
<div>
<input type="checkbox" id="1">
<h1>
1
<label for="1"></label>
</h1>
<div class="content">
<p>Content for 1</p>
</div>
</div>
<div>
<input type="checkbox" id="2">
<h1>
2
<label for="2"></label>
</h1>
<div class="content">
<p>Content for 2</p>
</div>
</div>

Answer 3

Id cannot be used twice in the same page. read-
https://css-tricks.com/the-difference-between-id-and-class/
Your code is right but the structure was slightly wrong. See my snippet below
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
div {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ label ~ div {
display: block;
}
input[type=checkbox]:checked ~ label:after {
content: " [hide]"
}
<input type="checkbox" id="Vampires_and_Vegetarians">
<label for="Vampires_and_Vegetarians">Vampires and Vegetarians</label>
<div><p>Content for Vampires and Vegetarians</p></div>
Hope this helps :)
UPDATE AFTER READING PO COMMENT
In case you have more divs to show and hide content through checkbox,
you just need to apply a unique id to every div. That's it. :)
see below example
label:after {
content: " [show]";
cursor: pointer;
float: right;
}
section {
display:block;
margin-top:20px;
}
div {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ label ~ div {
display: block;
}
input[type=checkbox]:checked ~ label:after {
content: " [hide]"
}
<section>
<input type="checkbox" id="Vampires_and_Vegetarians1">
<label for="Vampires_and_Vegetarians1">Vampires and Vegetarians 1</label>
<div><p>Content for Vampires and Vegetarians 1</p></div>
</section>
<section>
<input type="checkbox" id="Vampires_and_Vegetarians2">
<label for="Vampires_and_Vegetarians2">Vampires and Vegetarians 2</label>
<div><p>This is 2nd para</p></div>
</section>
<section>
<input type="checkbox" id="Vampires_and_Vegetarians3">
<label for="Vampires_and_Vegetarians3">Vampires and Vegetarians 3</label>
<div><p>This is 3rd para</p></div>
</section>