CODEWITHSUNDEEP
javascriptjqueryhtmlfilter
Mr x
Mr x

Reputation: 868

Collpasing filters using jQuery

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.

Upvotes: 0

Views: 49

Answers (3)

andrea_19920611
andrea_19920611

Reputation: 76

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>

Upvotes: 0

giuseppe straziota
giuseppe straziota

Reputation: 443

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');
      });
});

Upvotes: 1

Duncan Lukkenaer
Duncan Lukkenaer

Reputation: 13914

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');
});

Upvotes: 0

Related Questions