javascript - jQuery Accordian DOM -

i trying create jquery accordian. please see code below:

html :

<div class="filter-cat colour">     <h3>colour <i class="fa fa-angle-down" aria-hidden="true"></i></h3>     <ul>         <li><input type="checkbox" checked=""> red <span class="count">(64)</span></li>         <li><input type="checkbox" checked=""> dry white <span class="count">(78)</span></li>         <li><input type="checkbox" checked=""> sparkling <span class="count">(24)</span></li>         <li><input type="checkbox" checked=""> sweet white <span class="count">(16)</span></li>         <li><input type="checkbox" checked=""> rose <span class="count">(6)</span></li>         <li><input type="checkbox" checked=""> spirits & liqueurs <span class="count">(16)</span></li>     </ul> </div> <div class="filter-cat vintage">     <h3>vintage <i class="fa fa-angle-down" aria-hidden="true"></i></h3>     <ul>         <li><input type="checkbox" checked=""> 2013 <span class="count">(16)</span></li>         <li><input type="checkbox" checked=""> 2012 <span class="count">(12)</span></li>         <li><input type="checkbox" checked=""> 2011 <span class="count">(7)</span></li>         <li><input type="checkbox" checked=""> 2010 <span class="count">(5)</span></li>         <li><input type="checkbox" checked=""> 2009 <span class="count">(3)</span></li>         <li><input type="checkbox" checked=""> 2008 <span class="count">(1)</span></li>         <li><input type="checkbox" checked=""> 2007 <span class="count">(1)</span></li>         <li><a href="#">view more</a></li>     </ul> </div> 

jquery :

$(".filter-cat h3").click(function(){     $(this).parent('ul').slidetoggle(400); }); 

basically when user clicks on h3 suppose open below. jquery wrong can tell me how fix it?

thanks

working fiddle.

you have wrong selector in jquery code :

$(this).parent('ul').slidetoggle(400); 

the $(this).parent('ul') try find parent ul of h3 element when it's not exist.

you should select ul element based on parent() :

$(this).parent().find("ul").slidetoggle(400); 

hope helps.

$(".filter-cat h3").click(function(){      $(this).parent().find('ul').slidetoggle(400);  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="filter-cat colour">      <h3>colour <i class="fa fa-angle-down" aria-hidden="true"></i></h3>      <ul>          <li><input type="checkbox" checked=""> red <span class="count">(64)</span></li>          <li><input type="checkbox" checked=""> dry white <span class="count">(78)</span></li>          <li><input type="checkbox" checked=""> sparkling <span class="count">(24)</span></li>          <li><input type="checkbox" checked=""> sweet white <span class="count">(16)</span></li>          <li><input type="checkbox" checked=""> rose <span class="count">(6)</span></li>          <li><input type="checkbox" checked=""> spirits & liqueurs <span class="count">(16)</span></li>      </ul>  </div>  <div class="filter-cat vintage">      <h3>vintage <i class="fa fa-angle-down" aria-hidden="true"></i></h3>      <ul>          <li><input type="checkbox" checked=""> 2013 <span class="count">(16)</span></li>          <li><input type="checkbox" checked=""> 2012 <span class="count">(12)</span></li>          <li><input type="checkbox" checked=""> 2011 <span class="count">(7)</span></li>          <li><input type="checkbox" checked=""> 2010 <span class="count">(5)</span></li>          <li><input type="checkbox" checked=""> 2009 <span class="count">(3)</span></li>          <li><input type="checkbox" checked=""> 2008 <span class="count">(1)</span></li>          <li><input type="checkbox" checked=""> 2007 <span class="count">(1)</span></li>          <li><a href="#">view more</a></li>      </ul>  </div>