CSS Show/Hide Div Sibling Elements

Asked Sep 10 '19 at 19:45

Active Sep 10 '19 at 19:50

Viewed 41 times

From a purely CSS standpoint I'm trying to find a way to hide/show an element based on a radio button being marked. I think the issue I'm having is that I'm trying to grab from sibling. Is there a way to grab the parent's sibling?

.radio > input#yes_0:checked~.something {
  display: inherit;
}
.something {
  display:none;
}

<form>
  <div class="row form-group radio">
    <input class="form-check-input" type="radio" value="0" name="radio" id="yes_0">
    <label class="form-check-label" for="radio_Yes">Yes</label>
    <input class="form-check-input" type="radio" value="1" checked="checked" name="radio" id="no_1">
    <label class="form-check-label" for="radio_no">No</label>
  </div>
  <div class="something">
    <h4>Something</h4>
  </div>
</form>

edited Sep 10 '19 at 19:50

asked Sep 10 '19 at 19:45

Jake

1,328
1
21
51

What's this supposed to do `input#yes_1`? But to answer your question no, there's no parent selector – j08691 Sep 10 '19 at 19:48
There is no `parent` selector in CSS, so you can't traverse up the DOM and then get a sibling of that element. – disinfor Sep 10 '19 at 19:49
You are going to have to use javascript or JQuery to do this. – elke_wtf Sep 10 '19 at 19:52
Just one radio can be checked so you do not need the id of the input element. – Honsa Stunna Sep 10 '19 at 19:54
If you add the .something div inside the .row div, it will work – Keith Sep 10 '19 at 19:55

CSS Show/Hide Div Sibling Elements

0 Answers0