CODEWITHSUNDEEP
jquerycheckboxhideshow
JeanLeSheep
JeanLeSheep

Reputation: 89

Show / Hide children of an li when checkbox is clicked

I have a large unordered list of categories for the user to checkoff what category they want their product to be in. Each Parent category has children. I'd like to hide all the children, and when you check the parent category, the children of the category show. I've tried this code and it toggles all the children elements and not just the one in the current li being checked.

jQuery

    $('.wcvendors-pro-dashboard-wrapper ul.product_cat_checklist > li > input[type=checkbox]').change(function()
     {
   if ($(this).is(':checked')) {
      $( ".wcvendors-pro-dashboard-wrapper ul.product_cat_checklist li > ul.children" ).toggle( "slow", function() {
      });

      };
    });

List 

<ul class="product_cat_checklist">
    <li id="product_cat-15"><input class="wcv_category_check" value="15" type="checkbox" name="product_cat[]" id="in-product_cat-15" data-parsley-multiple="product_cat">
    <label class="selectit" for="in-product_cat-15">Home Furnishings</label>
        <ul class="children">
        <li id="product_cat-61">
            <input class="wcv_category_check" value="61" type="checkbox" name="product_cat[]" id="in-product_cat-61" data-parsley-multiple="product_cat">
            <label class="selectit" for="in-product_cat-61">Bedroom</label>
        </li>
        <li id="product_cat-63">
            <input class="wcv_category_check" value="63" type="checkbox" name="product_cat[]" id="in-product_cat-63" data-parsley-multiple="product_cat">
            <label class="selectit" for="in-product_cat-63">Children’s Furniture</label>
        </li>
        <li id="product_cat-60">
            <input class="wcv_category_check" value="60" type="checkbox" name="product_cat[]" id="in-product_cat-60" data-parsley-multiple="product_cat">
            <label class="selectit" for="in-product_cat-60">Kitchen &amp; Dining</label>
        </li>
        </ul>
    </li>

    <li id="product_cat-38">
        <input class="wcv_category_check" value="38" type="checkbox" name="product_cat[]" id="in-product_cat-38" data-parsley-multiple="product_cat"> 
        <label class="selectit" for="in-product_cat-38">Arts &amp; Crafts</label>
        <ul class="children">
            <li id="product_cat-53">
                <input class="wcv_category_check" value="53" type="checkbox" name="product_cat[]" id="in-product_cat-53" data-parsley-multiple="product_cat"> 
                <label class="selectit" for="in-product_cat-53">Art Supplies</label>
            </li>
            <li id="product_cat-52">
                <input class="wcv_category_check" value="52" type="checkbox" name="product_cat[]" id="in-product_cat-52" data-parsley-multiple="product_cat"> 
                <label class="selectit" for="in-product_cat-52">Bath &amp; Beauty</label>
            </li>
            <li id="product_cat-46">
                <input class="wcv_category_check" value="46" type="checkbox" name="product_cat[]" id="in-product_cat-46" data-parsley-multiple="product_cat"> 
                <label class="selectit" for="in-product_cat-46">Clothing &amp; Shoes</label>
            </li>
        </ul>
    </li>
</ul>

Upvotes: 0

Views: 808

Answers (1)

Mehdi Dehghani
Mehdi Dehghani

Reputation: 11601

You need to hide child uls on page load and show them based on state of checkboxes using following code:

$('li > input[type=checkbox]').on('change', function() {
  var $this = $(this),
    $ul = $this.parent().find('> ul');

  if ($this.is(':checked')) $ul.show();
  else $ul.hide();
});

For hiding uls use this CSS code:

ul.children{
  display: none;
}

Working example

Upvotes: 1

Related Questions