How to target an element using input type checkbox-CodePudding

I have a dropdown type list that will get hidden after specific device width and by default dropdown box will be visible so user is not able to collapse it.

Default state for input is also hidden.

Suppose the device width is 804px,and the dropdown gets hidden and input gets visible. By clicking the input the user can see the contents of the dropdown.

But for some reason I'm unable to target the dropdown box using the input field.

input[type="checkbox"]:checked~.team-lists {
  display: flex;
  height: 430px;
}

<div >
  <div >
    <h2>Hire Developer Team</h2>
    <label for="team-lists">
      <input type="checkbox"  id="team-lists" hidden>
      <i ></i>
    </label>
  </div>
  <div >
    <a href="#">Android App Developers</a>
    <a href="#">iOS App Developers</a>
    <a href="#">Flutter App Developers</a>
  </div>
</div>

CodePudding user response：

Your selector input[type="checkbox"]:checked~.team-lists targets any elements that have a CSS class of team-lists that are siblings (~) of an input with type checkbox which is in checked state. This does not match your HTML structure; for this to work both the checkbox and the target div would have to have the exact same parent element, with the div coming after the checkbox. Given your current approach, that would mean you'd have to put the div inside the label (which would be a very bad approach).

Up until recently, you can only select forward (subsequent siblings)/downward (descendants) in CSS, which means once your selector has reached your checkbox, there is no way to continue your selector so you can reach your div.team-lists.

To solve this age-old developer issue, CSS has introduced the very new :has() pseudo class, which so far is only supported in Safari, and in Chrome (starting from v 101) behind the experimental features flag.

Please note that for simplicity's sake I have removed your icon (which didn't work in your snippet either), and replaced it by the letters CB.

.hireDevs:has(input[type="checkbox"]:checked) .team-lists {
  display: flex;
  height: 430px;
}

<div >
  <div >
    <h2>Hire Developer Team</h2>
    <label for="team-lists">
      <input type="checkbox"  id="team-lists" hidden>
      CB
    </label>
  </div>
  <div  hidden>
    <a href="#">Android App Developers</a>
    <a href="#">iOS App Developers</a>
    <a href="#">Flutter App Developers</a>
  </div>
</div>

So for your specific use-case, if :has() is not yet an option, you'll have to resort to JavaScript:

document
  .getElementById('team-lists')
  .addEventListener('change', function(event) {
    document.querySelector('.team-lists').hidden = !this.checked;
  });

.team-lists:not([hidden]) {
  display: flex;
  height: 430px;
}

<div >
  <div >
    <h2>Hire Developer Team</h2>
    <label for="team-lists">
      <input type="checkbox"  id="team-lists" hidden>
      CB
    </label>
  </div>
  <div  hidden>
    <a href="#">Android App Developers</a>
    <a href="#">iOS App Developers</a>
    <a href="#">Flutter App Developers</a>
  </div>
</div>

CodePudding user response：

You can target an input tag like this :

const input = document.querySelector("input[type=checkbox]");

const input = document.querySelector("input[type=checkbox]");
console.log(input);

input[type="checkbox"]:checked .team-lists {
  display: flex;
  height: 430px;
}

<div >
  <div >
    <h2>Hire Developer Team</h2>
    <label for="team-lists">
      <input type="checkbox"  id="team-lists" hidden>
      <i ></i>
    </label>
  </div>
  <div >
    <a href="#">Android App Developers</a>
    <a href="#">iOS App Developers</a>
    <a href="#">Flutter App Developers</a>
  </div>
</div>