How to show/hide text using a checkbox without js

Question

I am trying that when I check the box with id "expand", the rest is shown, and normally while the box is unchecked, it is not shown, but I can't get it to show, any tips or ideas?

div div p {
  display: none;
}

#expand:checked .checkbox {
  display: block;
}

<fieldset>
  <div>Pincha para recibir información:
    <input type="checkbox" class="checkbox" id="expand" value="yes">
    <div class="checkbox">
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
    </div>
  </div>

Does this answer your question? Hide div when checkbox checked without JavaScript — Garv
– Garv, Commented Jan 30, 2023 at 16:52

j08691 · Accepted Answer · 2023-01-30 15:28:19Z

3

You can do it by using the sibling selector, +, and targeting the container div instead of the paragraph:

div div.checkbox {
  display: none;
}

#expand:checked + .checkbox {
  display: block;
}

<fieldset>
  <div>Pincha para recibir información:
    <input type="checkbox" class="checkbox" id="expand" value="yes">
    <div class="checkbox">
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
      <p><input type="checkbox"> Tenerife</p>
    </div>
  </div>

answered Jan 30, 2023 at 15:28

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to show/hide text using a checkbox without js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related