0

Depending on the state of the checkbox, I am trying to show/hide each .item if its nested element .nested has the invisible class. So either on change or on load I want the code to recognize the state of the checkbox and show / hide the .item if it's nested element has the invisible class.

$(function() {
  hideArchive();
  $("#toggle").change(hideArchive);
});

function hideArchive() {
  $(".item").each(function() {
    var $this = $(this);
    if ($(".nested", this).hasClass("w-condition-invisible")) {
      $this.hide();
    } else {
      $this.show();
    }
  });
}
.item {
  border: 1px solid;
  padding: 24px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="toggle" checked>
<div class="item">
  <div class="nested"></div>
</div>
<div class="item">
  <div class="nested w-condition-invisible"></div>
</div>
<div class="item">
  <div class="nested"></div>
</div>
Kyle Underhill
  • 89
  • 15
  • 43
  • Does this help? https://stackoverflow.com/questions/901712/how-do-i-check-whether-a-checkbox-is-checked-in-jquery – freedomn-m Oct 07 '20 at 18:07
  • Bit unclear what you're trying to do - "recognise the state of the checkbox" / "show/hide if nested element has invis class" - these two these don't appear to be related. The checkbox doesn't have nested items for a start. – freedomn-m Oct 07 '20 at 18:09
  • 1
    Loathe to give a full answer, as it's unclear, but this looks like what you're after: `function hideArchive() { $(".w-condition-invisible").closest(".item").toggle($("#toggle").is(":checked")); }` – freedomn-m Oct 07 '20 at 18:12

0 Answers0