Utilizing CSS for displaying and hiding content based on its unique identifier

Question

Utilizing CSS for displaying and hiding content based on its unique identifier

Is it possible to show/hide a div using only CSS based on its ID?

Showcasing this functionality in jQuery or vanilla JavaScript is straightforward, but can the same effect be achieved with pure CSS?

The checkbox hack requires a specific structure to function properly.

Furthermore, I would prefer if the div was hidden only until the next h1 element appears, if applicable.

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>

css

Answer 1

Answer №1

To ensure that your checkbox can effectively control elements, it needs to be positioned before them in the dom. I have rearranged it to the top for you.

I made some adjustments to your CSS code as well. Initially, you were hiding the p element and then trying to display the div, but now we are hiding the div and then showing it.

Additionally, I switched your use of + to ~ since 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 trust this information proves to be beneficial for you 🙂
Don't hesitate to seek further clarification if needed.

Answer 2

To ensure that your checkbox can effectively control elements, it needs to be positioned before them in the dom. I have rearranged it to the top for you.

I made some adjustments to your CSS code as well. Initially, you were hiding the p element and then trying to display the div, but now we are hiding the div and then showing it.

Additionally, I switched your use of + to ~ since 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 trust this information proves to be beneficial for you 🙂
Don't hesitate to seek further clarification if needed.

Answer 3

Answer №2

To ensure proper targeting of sibling elements, it is necessary to adjust the hierarchy of the elements as shown below. Avoid using the same id multiple times within a page.

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 4

To ensure proper targeting of sibling elements, it is necessary to adjust the hierarchy of the elements as shown below. Avoid using the same id multiple times within a page.

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 5

Answer №3

It is important to note that an ID cannot be repeated within the same page. For more information on the difference between IDs and classes, you can check out this link: https://css-tricks.com/the-difference-between-id-and-class/

Your code seems correct, but there was a slight issue with the structure. Please refer to the snippet below for the corrected version.

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>

I hope this clarifies things for you :)

AFTER READING A COMMENT:

If you have multiple divs and want to show/hide their content using checkboxes, simply give each div a unique ID. That's all you need to do :)

Refer to the example below for a clear demonstration.

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 the second paragraph</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 the third paragraph</p></div>
</section>

Answer 6

It is important to note that an ID cannot be repeated within the same page. For more information on the difference between IDs and classes, you can check out this link: https://css-tricks.com/the-difference-between-id-and-class/

Your code seems correct, but there was a slight issue with the structure. Please refer to the snippet below for the corrected version.

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>

I hope this clarifies things for you :)

AFTER READING A COMMENT:

If you have multiple divs and want to show/hide their content using checkboxes, simply give each div a unique ID. That's all you need to do :)

Refer to the example below for a clear demonstration.

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 the second paragraph</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 the third paragraph</p></div>
</section>

Utilizing CSS for displaying and hiding content based on its unique identifier

Answer №1

Answer №2

Answer №3

Similar questions

I'm puzzled as to why the hidden input field consistently returns the same value every time

Understanding the Hierarchy of CSS and Bootstrap Styles

How can I show/hide a div based on checkbox click on my website? It works in jsFiddle, but not on my actual site. Any suggestions?

When using jQuery to enable contenthover on divs, they will now start a new line instead of

Utilizing Javascript to implement a tooltip feature for dynamically inserted text

"Placing drop-down animations in just the right spot

Center Text Field to Linear Progress in React

Refresh iOS / iPad website only upon scrolling, not when utilizing anchor links

Unique and responsive grid styling with CSS

The Reason Behind Angular Error when Using CSS Custom Tags

What is the best way to convert this JavaScript iteration function into jQuery?

One cool CSS trick: altering a div's background color with hover!

Renew The Dining Surface

A guide on how to selectively blur and make the background transparent in jgrowl notifications without affecting the content

The full width of the div exceeds the parent's width, resulting in the box size being ineffective

Parent menu fails to trigger the opening of child menu upon clicking

What is the best way to right-align a label in a vertical MUI Slider in ReactJS?

When adjusting the window size with the <ion-split-pane>, both the menu and router outlet disappear

Guide to designing a CSS gradient with a downward arrow linked to a specific container

The mouse coordinates do not align with the drawing of a rectangle on the canvas