Is there a Sass method to use input:checked to target sibling section?

Question

I am attempting to use input:checked on an ID to display text in another section? Basically when #tab1 is checked #content1 display should change from none to block. Any help is appreciated

I've attempted

 #tab1:checked ~ #content1{
   display: block;
 }

Here is the code:

<section class="tab--blue">
   <div>
     <input id="tab1" type="radio" name="tabs">
     <label for="tab1">Label Text</label>
   </div>
</section>

<section class="tab--grey">
   <div id="content1">
      <h4>Text to display </h4>
   </div>
</section>

score 4 · Accepted Answer · answered Jun 20 '19 at 01:31

Siblings operator does not work because the input and h4 are not siblings. Sections are the only siblings here.

Try this one:

.input ~ .label{
  display: none;
}

.input:checked ~ .label{
  display: block;
}

.input:checked ~ p{
  color: blue;
}

<input type="checkbox" class="input">
<label class="label"> Label </label>
<p> Random Text </p>

Is there a Sass method to use input:checked to target sibling section?

1 Answers1