Show/Hide UL child if checked

0 Views

I’m trying to show/hide some ul checkboxes when the parent is clicked. I’ve searched everywhere and I just can’t get it to work!

Could someone please help me to get this to work? If a parent category is checked, sub checkboxes needs to show/hide.

Read More

This is the code: 

<div id="refine-categories">
						<h4>Categories</h4>
						<ul class="parent cf">
<li id='project_category-3' class="popular-category"><label class="selectit"><input value="3" type="checkbox" name="cat_project_category[]" id="in-project_category-3" /> Aanbouw &amp; Opbouw</label><ul class='children'>

<li id='project_category-33'><label class="selectit"><input value="33" type="checkbox" name="cat_project_category[]" id="in-project_category-33" /> aanbouw</label></li>

<li id='project_category-34'><label class="selectit"><input value="34" type="checkbox" name="cat_project_category[]" id="in-project_category-34" /> algemeen</label></li>

<li id='project_category-35'><label class="selectit"><input value="35" type="checkbox" name="cat_project_category[]" id="in-project_category-35" /> Fundering en heiwerken</label></li>

<li id='project_category-36'><label class="selectit"><input value="36" type="checkbox" name="cat_project_category[]" id="in-project_category-36" /> garage bouwen</label></li>

<li id='project_category-37'><label class="selectit"><input value="37" type="checkbox" name="cat_project_category[]" id="in-project_category-37" /> isoleren</label></li>

<li id='project_category-38'><label class="selectit"><input value="38" type="checkbox" name="cat_project_category[]" id="in-project_category-38" /> nieuwbouw</label></li>

<li id='project_category-39'><label class="selectit"><input value="39" type="checkbox" name="cat_project_category[]" id="in-project_category-39" /> opbouw</label></li>

<li id='project_category-40'><label class="selectit"><input value="40" type="checkbox" name="cat_project_category[]" id="in-project_category-40" /> renovatie</label></li>

<li id='project_category-41'><label class="selectit"><input value="41" type="checkbox" name="cat_project_category[]" id="in-project_category-41" /> veranda en serre</label></li>
</li>
</ul>					</div>

When I click on a parent checkbox I can see the span class is changed to <span class="custom checkbox checked"></span>

Hope someone can help me to sort this out!

Thank you for your time!

PS: You can check the website here: http://bit.ly/20Miaom It’s in the sidebar (right).

Post Views: 0

Related posts

2 comments

  1. set the .children to display:none;.

    then from .parent, find the first checkbox. add a change event then toggle .children if it is checked.

    to be more generic for all lists, use this, go back up the the .parent and find the .children to toggle.

    $('.parent input[type="checkbox"]:first-child').change(function(){
    $(this).closest('.parent').find('.children').toggle($(this).is(':checked'));
});


    $('.parent input[type="checkbox"]:first-child').change(function() {
  $(this).closest('.parent').find('.children').toggle($(this).is(':checked'));
});
    .children {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="refine-categories">
  <h4>Categories</h4>
  <ul class="parent cf">
    <li id='project_category-3' class="popular-category">
      <label class="selectit">
        <input value="3" type="checkbox" name="cat_project_category[]" id="in-project_category-3" />Aanbouw &amp; Opbouw</label>
      <ul class='children'>

        <li id='project_category-33'>
          <label class="selectit">
            <input value="33" type="checkbox" name="cat_project_category[]" id="in-project_category-33" />aanbouw</label>
        </li>

        <li id='project_category-34'>
          <label class="selectit">
            <input value="34" type="checkbox" name="cat_project_category[]" id="in-project_category-34" />algemeen</label>
        </li>

        <li id='project_category-35'>
          <label class="selectit">
            <input value="35" type="checkbox" name="cat_project_category[]" id="in-project_category-35" />Fundering en heiwerken</label>
        </li>

        <li id='project_category-36'>
          <label class="selectit">
            <input value="36" type="checkbox" name="cat_project_category[]" id="in-project_category-36" />garage bouwen</label>
        </li>

        <li id='project_category-37'>
          <label class="selectit">
            <input value="37" type="checkbox" name="cat_project_category[]" id="in-project_category-37" />isoleren</label>
        </li>

        <li id='project_category-38'>
          <label class="selectit">
            <input value="38" type="checkbox" name="cat_project_category[]" id="in-project_category-38" />nieuwbouw</label>
        </li>

        <li id='project_category-39'>
          <label class="selectit">
            <input value="39" type="checkbox" name="cat_project_category[]" id="in-project_category-39" />opbouw</label>
        </li>

        <li id='project_category-40'>
          <label class="selectit">
            <input value="40" type="checkbox" name="cat_project_category[]" id="in-project_category-40" />renovatie</label>
        </li>

        <li id='project_category-41'>
          <label class="selectit">
            <input value="41" type="checkbox" name="cat_project_category[]" id="in-project_category-41" />veranda en serre</label>
        </li>
    </li>
    </ul>
</div>
<div id="refine-categories">
  <h4>Categories 2</h4>
  <ul class="parent cf">
    <li id='project_category-3' class="popular-category">
      <label class="selectit">
        <input value="3" type="checkbox" name="cat_project_category[]" id="in-project_category-3" />Aanbouw &amp; Opbouw</label>
      <ul class='children'>

        <li id='project_category-33'>
          <label class="selectit">
            <input value="33" type="checkbox" name="cat_project_category[]" id="in-project_category-33" />aanbouw</label>
        </li>

        <li id='project_category-34'>
          <label class="selectit">
            <input value="34" type="checkbox" name="cat_project_category[]" id="in-project_category-34" />algemeen</label>
        </li>

        <li id='project_category-35'>
          <label class="selectit">
            <input value="35" type="checkbox" name="cat_project_category[]" id="in-project_category-35" />Fundering en heiwerken</label>
        </li>

        <li id='project_category-36'>
          <label class="selectit">
            <input value="36" type="checkbox" name="cat_project_category[]" id="in-project_category-36" />garage bouwen</label>
        </li>

        <li id='project_category-37'>
          <label class="selectit">
            <input value="37" type="checkbox" name="cat_project_category[]" id="in-project_category-37" />isoleren</label>
        </li>

        <li id='project_category-38'>
          <label class="selectit">
            <input value="38" type="checkbox" name="cat_project_category[]" id="in-project_category-38" />nieuwbouw</label>
        </li>

        <li id='project_category-39'>
          <label class="selectit">
            <input value="39" type="checkbox" name="cat_project_category[]" id="in-project_category-39" />opbouw</label>
        </li>

        <li id='project_category-40'>
          <label class="selectit">
            <input value="40" type="checkbox" name="cat_project_category[]" id="in-project_category-40" />renovatie</label>
        </li>

        <li id='project_category-41'>
          <label class="selectit">
            <input value="41" type="checkbox" name="cat_project_category[]" id="in-project_category-41" />veranda en serre</label>
        </li>
    </li>
    </ul>
</div>

  2. You will need to use some JQuery for this. 

    $('#in-project_category-3').click(function () {
    $(".children").toggle(this.checked);
});

    while your child ul needs to get display: none

    I made you a fiddle, i hope this is what you wanted:
    https://jsfiddle.net/jfuhdq0g/2/

Comments are closed.