Need Help in Jquery issue for Filters

Question

I am working on filters and want to show/hide div based on the Filter Hover. ie 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");
    });
  });      

Answer 1

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:

• .closing: https://api.jquery.com/closest/
• .next: https://api.jquery.com/next/