mercredi 23 octobre 2019

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>



Aucun commentaire:

Enregistrer un commentaire