0

I need to hide/display two div based on input but it is not working. When INPUT buttons are outside of div then it works but I need to keep input buttons within their own div.

div#doctorcard, div#facilitycard {
    display:none;
}
input#doctor:checked ~ div#doctorcard {
  display:block;
}

input#facility:checked ~ div#facilitycard {
  display:block;
}
<div>
<label for="doctor"><span>show</span></label>
<input type=checkbox id="doctor">

<label for="facility"><span>hide</span></label>    
<input type=checkbox id="facility">
</div>

<div>
    <div id="doctorcard">Zeeshan 1</div>
    <div id="facilitycard">Zeeshan 2</div>
</div>
ZEESHAN ARSHAD
  • 506
  • 5
  • 10
  • You can't 'go up' a level in CSS as there is [**no parent selector in CSS**](https://css-tricks.com/parent-selectors-in-css/). You would need to 'break out' of the parent `
    ` before applying your sibling selector, so it is impossible to achieve what you are asking with the current structure. However, [**this answer of mine**](https://stackoverflow.com/a/51959756/2341603) shows how you can toggle a sibling in CSS by using an ``, assuming you're willing to slightly change the structure.
     – Obsidian Age Oct 29 '18 at 03:45
  • You need Javascript to accomplish this with your current HTML structure – Gerard Oct 29 '18 at 05:59

0 Answers0