CODEWITHSUNDEEP
javascriptjqueryhtmldom
dee flor
dee flor

Reputation: 69

Need Help in Jquery issue for Filters

I am working on filters and want to show/hide div based on the Filter Hover. i.e I have 3 filter groups(Color, Finish and Print) These filter groups have individual filters (Like Black,Red/Anti bacterial/ Pigment print) accordingly.

I want to display filters on hover of Filter group. Say for Ex. If i Hover on Color then filter div has to be shown, Like wise. Below are the sample DIV structure.

<div class="list-group">
     <a class="list-group-item fltrHdng"> Color <i class="fa fa-angle-down"></i></a>  
     <div class="list-group-item fltr-items">
          <div id="filter-group21>" class="cf fltrs">
              <label class="checkbox cb_test">
                  <input name="filter[]" type="checkbox" value="151">
                 Black
              </label>
              <label class="checkbox cb_test">
                  <input name="filter[]" type="checkbox" value="152">
                 Red
              </label>
          </div>
      </div>
      <a class="list-group-item fltrHdng">Finish<i class="fa fa-angle-down"></i></a>  
      <div class="list-group-item fltr-items">
          <div id="filter-group23>" class="cf fltrs">
              <label class="checkbox cb_test">
                  <input name="filter[]" type="checkbox" value="153">
                  Anti bacterial
              </label>
          </div>
      </div>
      <a class="list-group-item fltrHdng">Print<i class="fa fa-angle-down"></i></a>  
      <div class="list-group-item fltr-items">
          <div id="filter-group24" class="cf fltrs">
              <label class="checkbox cb_test">
                  <input name="filter[]" type="checkbox" value="154">
                  Pigment print 
              </label>
          </div>
      </div>
</div>

Mycode which is not working

$(document).ready(function(){ 
    $(".fltrHdng").mouseover(function(){
        $(this).closest('.fltr-items').stop().slideDown("slow");
    });
    $(".fltrHdng").mouseout(function(){
        $(this).closest('.fltr-items').stop().slideUp("slow");
    });
  });

Upvotes: 1

Views: 37

Answers (1)

Kees van Lierop
Kees van Lierop

Reputation: 1013

Instead of .closing, which looks for the closest parent, you need the .next method:

$(document).ready(function(){ 
    $(".fltrHdng").mouseover(function(){
        $(this).next().stop().slideDown("slow");
    });
    $(".fltrHdng").mouseout(function(){
        $(this).next().stop().slideUp("slow");
    });
});

From docs:

Upvotes: 1

Related Questions