Solution 1 :

EDIT to match new requirements.

You can use the “following sibling” selector to check if a button follows a checked checkbox.

button {
  display: none;
.btn1:checked ~ #btn1,
.btn2:checked ~ #btn2 {
  display: block;
<input type="checkbox" class="btn1">
<input type="checkbox" class="btn1 btn2">
<input type="checkbox" class="btn2">
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>

This is super sensitive to the HTML structure. It’s easy if the checkboxes and the button are siblings, but if there’s different levels, it becomes harder, or impossible. A JavaScript solution doesn’t care about the structure too much:

const buttons = Array.from(document.querySelectorAll('button'));

function setButton(button, visible) { = visible ? "inline" : "none";

document.querySelector('div').addEventListener('click', evt => {
  if ('input[type="checkbox"]')) {
    buttons.forEach(button => {
      let selector = button.getAttribute('data-cb');
      let checkboxes = Array.from(document.querySelectorAll(selector));
      let someChecked = checkboxes.some(e => e.checked);
      setButton(button, someChecked);
buttons.forEach(button => setButton(button, false));
  <input type="checkbox" id="cb1">
  <input type="checkbox" id="cb2">
  <input type="checkbox" id="cb3">
  <button data-cb="#cb1,#cb2">btn1</button>
  <button data-cb="#cb2,#cb3">btn2</button>

Solution 2 :

try this:

    .target-div {
        width: 100%;
        height: 100px;
        background-color: #99f;
        margin-top: 16px;
        display: none;

    input:checked ~ .target-div{
        display: block;
<input class="input1" type="checkbox"> input 1
<input class="input2" type="checkbox"> input 2
<div class="target-div"></div>

Problem :

Lets say I have several toggle buttons. And toggle 1 and 2 will toggle the visibility of a div, whenever one or both of those buttons are active, the div will appear.

The toggles and div’s are created dynamically from db records. So there will be instances when we have 3 toggles and 2 divs. For example:

toggle1 and toggle2 activates div1

toggle2 and toggle3 activates div2

I am fairly certain this is an JS problem but if it can be solved without JS then I will be happy.


Comment posted by Amadan

What is a “toggle button”? Checkbox? A button styled with a certain class when pressed or depressed? What is the HTML structure you have?

Comment posted by Intekin

It is basically a checkbox but styled like an on/off toggle switch. HTML structure? It is an abomination of HTML and Razor syntax if that is what is being asked.

Comment posted by Charlie

What did you try? Please show us some code.

Comment posted by Amadan

Not cool, completely changing the question like that.

Comment posted by Intekin

Yeah I know that I was not clear enough when I first wrote it and it was also inconsistent. It is totally my fault. But your answer helped me understand where my question went wrong it is description.

Comment posted by Intekin

That is awesome, lets see if I can use my feeble mind and comprehend and implement an scaled up version of this.

Comment posted by Intekin

Thank you, it works splendidly.