Search code examples
jqueryslidetoggle

SlideToggle is not a function on ul menu


http://hd.kirstymarks.com/

I'm creating a simple menu (see toggle menu). However when the anchor with class submenu-button is clicked I am receiving the following error.

Toggle works fine, however slideToggle does not.

Here is my jquery:

$j('.submenu-button').on('click', function() {
    $j(this).next().slideToggle();
});

(I've applied the class .submenu-button with a simple each loop)

Any advice is appreciated.

Thanks

EDIT :

Please see my code below, and the error is in the console above. Uncaught Type Error

 <ul id="menu-consumer-menu" class="menu">
     <li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-5">
         <a href="#" class="submenu-button">Link</a>
         <ul class="sub-menu">
             <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="#">sub menu</a></li>
             <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">sub menu 2</a></li>
         </ul>
      </li>
      <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6">
          <a href="#" class="submenu-button">Link 2</a>
          <ul class="sub-menu">
              <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="#">Another sub menu</a></li>
          </ul>
      </li>
      <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7">
          <a href="#">Link 3</a>
      </li>
   </ul>

Solution

  • It looks like it's because you are using JQuery slim. Check out this answer: .slideToggle() not working when using Jquery 3.1.1