I'm trying to figure out a way to link a specific checkbox to show/hide a specific div element.

I was able to find code for checkboxes that show/hide Div elements that are immediately below them, but I'm wondering if there's a way to link a specific checkbox to any div I choose.

In my code, I'm basically trying to figure out how to make [cb1] or [cb2] toggle (show/hide) "divMenu3".

I've found a couple of posts in various forums basically saying that I need Javascript to achieve this, but is there really no easy way to do this in HTML/CSS alone?

I'm a total beginner.
Any advice would be super appreciated!

Full code:

CSS:

    input:checked + #divMenu1 {
        display: none;
    }

    input:checked + #divMenu2 {
        display: none;
    }

    input:checked + #divMenu3 {
        display: none;
    }

HTML:

<!--First Menu-->
<label for=cb1>[cb1]</label>
<input type='checkbox' style='display: none' id=cb1>

<div id="divMenu1">
    This is divMenu1.
</div>

<hr />


<!--Second Menu-->
<label for=cb2>[cb2]</label>
<input type='checkbox' style='display: none' id=cb2>

<div id="divMenu2">
    This is divMenu2.
</div>

<hr />


<!--Third Menu-->
<div id="divMenu3">
    This is divMenu3.
</div>

<hr />

I'm trying to figure out a way to link a specific checkbox to show/hide a specific div element.

I was able to find code for checkboxes that show/hide Div elements that are immediately below them, but I'm wondering if there's a way to link a specific checkbox to any div I choose.

In my code, I'm basically trying to figure out how to make [cb1] or [cb2] toggle (show/hide) "divMenu3".

I've found a couple of posts in various forums basically saying that I need Javascript to achieve this, but is there really no easy way to do this in HTML/CSS alone?

I'm a total beginner.
Any advice would be super appreciated!

Full code: https://pastebin./vg1TS171

CSS:

    input:checked + #divMenu1 {
        display: none;
    }

    input:checked + #divMenu2 {
        display: none;
    }

    input:checked + #divMenu3 {
        display: none;
    }

HTML:

<!--First Menu-->
<label for=cb1>[cb1]</label>
<input type='checkbox' style='display: none' id=cb1>

<div id="divMenu1">
    This is divMenu1.
</div>

<hr />


<!--Second Menu-->
<label for=cb2>[cb2]</label>
<input type='checkbox' style='display: none' id=cb2>

<div id="divMenu2">
    This is divMenu2.
</div>

<hr />


<!--Third Menu-->
<div id="divMenu3">
    This is divMenu3.
</div>

<hr />

• javascript
• css
• html

• @Icepickle To be honest, I don't really see how it works either, but I'm assuming that, in the CSS, the divMenu items are linked to something that can be checked immediately preceding it. I found the structure for this code online, and I've been messing around with it trying to figure it out. – RANDROID Commented Apr 1, 2018 at 22:28

2 Answers 2

You can use the General sibling binator ~:

input:checked+#divMenu1 {
  display: none;
}

input:checked+#divMenu2 {
  display: none;
}


/** check both to show divMenu3 **/

#cb1:not(:checked)~#divMenu3,
#cb2:not(:checked)~#divMenu3 {
  display: none;
}

<!--First Menu-->
<label for="cb1">[cb1]</label>
<input type="checkbox" style="display: none" id="cb1">

<div id="divMenu1">
  This is divMenu1.
</div>

<hr />

<!--Second Menu-->
<label for="cb2">[cb2]</label>
<input type="checkbox" style="display: none" id="cb2">

<div id="divMenu2">
  This is divMenu2.
</div>

<hr />

<!--Third Menu-->
<div id="divMenu3">
  This is divMenu3.
</div>

<hr />

This would be the JavaScript solution:

function toggle(id) {
  var ele = document.getElementById(id);
  if (ele)
    ele.style.display = ele.style.display === "none" ? "initial" : "none";
}

input:checked+#divMenu1 {
  display: none;
}

input:checked+#divMenu2 {
  display: none;
}

input:checked+#divMenu3 {
  display: none;
}

<!--First Menu-->
<label for=cb1>[cb1]</label>
<input type='checkbox' style='display: none' id=cb1 onclick="toggle('divMenu3')">

<div id="divMenu1">
  This is divMenu1.
</div>

<hr />


<!--Second Menu-->
<label for=cb2>[cb2]</label>
<input type='checkbox' style='display: none' id=cb2 onclick="toggle('divMenu3')">

<div id="divMenu2">
  This is divMenu2.
</div>

<hr />

<!--Third Menu-->
<div id="divMenu3">
  This is divMenu3.
</div>

<hr />