Javascript JQuery toggle nested elements with checkbox

Question

I am currently having trouble accessing my list subclass. The idea is to create multi-level unfolding list with check boxes working as buttons. Right now it all folds/unfolds at the same time and we want elements to unfold by checking/unchecking it's parent.

I do realise I can use less/sass to hide/show those elements by clicking on them, but I would like to learn how do do it with jQuery.

$(document).ready(() => {

 $('.sub-ul').hide();
  
 $('.side-checkbox').each(function () {
    var obj = $('.sub-ul');
    $(this).click(function () {
      if ($(this).is(':checked')) {
        obj.show(300);
      } else {
        obj.hide(200);
      }
    });
  });
});

a {
  text-decoration: none;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul-nav">
  <li class="li-nav">
  
    <a class="side-menu-checkbox" href="#">(A)Lorem</a>

    <input type="checkbox" name="a" id="a" class="side-checkbox">

    <ul class="ul-nav sub-ul">
      <li class="li-nav">
        <a href="#">(B)Ipsum</a>

        <input type="checkbox" name="a" id="b" class="side-checkbox">

        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="side-menu-plus">(B)Ipsum</a>

        <input type="checkbox" name="a" id="c" class="side-checkbox">

        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="li-nav"><a href="#">(A)Lorem</a></li>
  <li class="li-nav">
    <a class="side-menu-checkbox" href="#">(A)Lorem</a>

    <input type="checkbox" name="a" id="a" class="side-checkbox">

    <ul class="ul-nav sub-ul">
      <li class="li-nav">
        <a href="#">(B)Ipsum</a>

        <input type="checkbox" name="a" id="b" class="side-checkbox">
        
        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="side-menu-plus">(B)Ipsum</a>

        <input type="checkbox" name="a" id="c" class="side-checkbox">
        

        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="li-nav"><a href="#">(A)Lorem</a></li>
</ul>

Dacre Denny · Accepted Answer · 2018-09-23 21:02:11Z

If I understand your question correctly, then the answer is a simple adjustment of

var obj = $('+ .sub-ul', this);  // Old code $('sub-ul');

This is a short-hand way of selecting the correct sub-ul list instance in your heirachy that is to be toggled for display, based on the adjacent checkbox that has been clicked.

In effect, what this change is doing is along the lines of saying:

for the current .side-checkbox that is clicked (ie this), select the .sub-ul sibling that directly follows this .side-checkbox

Here is a working code snippet - hope this helps!

$(document).ready(() => {

 $('.sub-ul').hide();
  
 $('.side-checkbox').each(function () {

    /* UPDATE: Here is the line that you need to update */
    var obj = $('+ .sub-ul', this);

    $(this).click(function () {
      if ($(this).is(':checked')) {
        obj.show(300);
      } else {
        obj.hide(200);
      }
    });
  });
});

a {
  text-decoration: none;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul-nav">
  <li class="li-nav">
  
    <a class="side-menu-checkbox" href="#">(A)Lorem</a>

    <input type="checkbox" name="a" id="a" class="side-checkbox">

    <ul class="ul-nav sub-ul">
      <li class="li-nav">
        <a href="#">(B)Ipsum</a>

        <input type="checkbox" name="a" id="b" class="side-checkbox">

        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="side-menu-plus">(B)Ipsum</a>

        <input type="checkbox" name="a" id="c" class="side-checkbox">

        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="li-nav"><a href="#">(A)Lorem</a></li>
  <li class="li-nav">
    <a class="side-menu-checkbox" href="#">(A)Lorem</a>

    <input type="checkbox" name="a" id="a" class="side-checkbox">

    <ul class="ul-nav sub-ul">
      <li class="li-nav">
        <a href="#">(B)Ipsum</a>

        <input type="checkbox" name="a" id="b" class="side-checkbox">
        
        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="side-menu-plus">(B)Ipsum</a>

        <input type="checkbox" name="a" id="c" class="side-checkbox">
        

        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="li-nav"><a href="#">(A)Lorem</a></li>
</ul>

Collectives™ on Stack Overflow

Javascript JQuery toggle nested elements with checkbox

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related