How to show/hide text using a checkbox without js-CodePudding

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"  id="expand" value="yes">
    <div >
      <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>

CodePudding user response：

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"  id="expand" value="yes">
    <div >
      <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>