Jquery .slideToggle() not working on button click

Question

In my html.css this is how I call the .js file <script src="slideul.js"></script> it is after the ending tag of body. I followed the steps but I don't know what is the problem. I need to hide first the ul and then pop the ul whenever the user clicks the button.

$('.btnrefine').next('.list-unstyled').hide();
$('.btnrefine').click(function() {
  $(this).next('.list-unstyled').slideToggle();
});

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="category">
  <div class="title-bg">
    <h3 class="category-title"><button type="button" class="btnrefine"><i class="fa fa-bars" aria-hidden="true"></i></button><span>Categories</span></h3>
  </div>
  <ul class="list-unstyled">
    <li><a href="" title="">Men's Apparel</li>
	<li><a href="" title="">Mobile and Gadgets</a></li>
    <li><a href="" title="">Consumer Electronics</a></li>
    <li><a href="" title="">Miscellaneous</a></li>
    <li><a href="" title="">Men's Accessories</a></li>
    <li><a href="" title="">Men's Shoes</a></li>
    <li><a href="" title="">Food</a></li>
    <li><a href="" title="">Hobbies and Stationery</a></li>
    <li><a href="" title="">Toys, Kids and Babies</a></li>
    <li><a href="" title="">Bags</a></li>
    <li><a href="" title="">Women's Accessories</a></li>
    <li><a href="" title="">Women's Shoes</a></li>
    <li><a href="" title="">Sports and Outdoors</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

Are you trying to slidetoggle the menu with the menubutton click see below for that, why are you trying to use .next() do you have multiple menu lists? if not you need to do it a simple way, otherwise you still need to use .parent().parent().next('.list-unstyled')and you should add the script inside the head or before the </body> tag.

$(document).ready(function() {


  $('.list-unstyled').hide();
  $('.btnrefine').click(function() {
    //console.log($(this).parent().parent().next());
    $(this).parent().parent().next('.list-unstyled').slideToggle();
  });

  //if not multiple menus
  //  $('.list-unstyled').hide();
  // $('.btnrefine').click(function() {
  //  $('.list-unstyled').slideToggle();
  // });
})

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="category">
  <div class="title-bg">
    <h3 class="category-title">
      <button type="button" class="btnrefine">
      <i class="fa fa-bars" aria-hidden="true"></i>
      </button>
      <span>Categories</span>
    </h3>
  </div>
  <ul class="list-unstyled">
    <li><a href="" title="">Men's Apparel</li>
							<li><a href="" title="">Mobile and Gadgets</a></li>
    <li><a href="" title="">Consumer Electronics</a></li>
    <li><a href="" title="">Miscellaneous</a></li>
    <li><a href="" title="">Men's Accessories</a></li>
    <li><a href="" title="">Men's Shoes</a></li>
    <li><a href="" title="">Food</a></li>
    <li><a href="" title="">Hobbies and Stationery</a></li>
    <li><a href="" title="">Toys, Kids and Babies</a></li>
    <li><a href="" title="">Bags</a></li>
    <li><a href="" title="">Women's Accessories</a></li>
    <li><a href="" title="">Women's Shoes</a></li>
    <li><a href="" title="">Sports and Outdoors</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>