使用jQuery合并过滤器

Question

I have written the following code, but I am not able to collapse the filters option, which is just below the given title.

 <h4><span class="glyphicon glyphicon-minus colit" aria-hidden="true"></span>DISCOUNTS</h4>
                     <div class="row row1 scroll-pane">
                         <div class="col col-4">
                                <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Upto - 10% (20)</label>
                         </div>
                         <div class="col col-4">
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>70% - 60% (5)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>50% - 40% (7)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>30% - 20% (2)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>10% - 5% (5)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>30% - 20% (7)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>10% - 5% (2)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Other(50)</label>
                         </div>
                     </div>

<h4><span class="glyphicon glyphicon-minus colit" aria-hidden="true"></span>Type</h4>
                        <div class="row row1 scroll-pane">
                            <div class="col col-4">
                                <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Alla (30)</label>
                            </div>
                            <div class="col col-4">
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Amante   (30)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Roxy      (30)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>River Land        (30)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Penny  (30)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>N-Gal  (30)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Penny  (30)</label>
                                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>N-Gal  (30)</label>
                            </div>
                        </div>

Here is my jQuery function to collapse it:

<script>        
$('.colit').click(function(){
  $(this).closest('.row1').toggle();
alert('Toggle');
});
</script>       

This function is invoked when button is clicked but filter details are not getting toggled.

Answer 1

I've modified the js, you can find it here https://jsfiddle.net/giuseppe_straziota/k8pvbmdq/

I think that the event is not started because if you click on the word DISCOUNT you are out of the scope of the class "colit", so I've moved the click event on tag h4 that cover all the word, in this way:

$(document).ready(function(){
      $('h4').click(function(){

      var panel = $(this)[0].nextElementSibling;
      $(panel).toggle();
      alert('Toggle');
      });
});

Answer 2

The closest() function searches up the DOM tree while your .row1 is below it. Use the find() function select the right element:

$('.colit').click(function(){
  $(this).find('.row1').toggle();
  alert('Toggle');
});

Answer 3

You have to change your html and the javascript. tag span must contain the other elements.

<span class="glyphicon glyphicon-minus colit" aria-hidden="true"><h4>DISCOUNTS</h4>
        <div class="row row1 scroll-pane">
            <div class="col col-4">
                <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Upto - 10% (20)</label>
            </div>
            <div class="col col-4">
                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>70% - 60% (5)</label>
                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>50% - 40% (7)</label>
                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>30% - 20% (2)</label>
                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>10% - 5% (5)</label>
                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>30% - 20% (7)</label>
                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>10% - 5% (2)</label>
                <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Other(50)</label>
            </div>
        </div>
    </span>

and the javascript

    <script>
        $(document).ready(function(){
            $('.colit').click(function(){
                $(this).find('.row1').toggle();
            });
        });
    </script>