Search code examples
jqueryhtmlcssslidetoggle

slideToggle Drop down Menu

I need some help with Jquery please.

I've got this string of code which triggers my drop-down menu to be displayed/hidden (visibility):

// toggle the menu items' visiblity
      .find('h2')
         .bind('click focus', function(){
            $(this).parent().toggleClass('expanded')
         });

Code taken from: http://filamentgroup.com/examples/rwd-nav-patterns/

However, I want to be able to toggle it using Jquery (want the smooth transition).

QUESTION:

How can I adapt this code to get the slideToggle to work?

I've tried replacing 'toggleClass' with 'slideToggle', which in a way works, but instead toggles my menu up, thus hiding 'h2'.

JSFiddle link: Please resize the window slightly for @Media Query to kick-in. Red box (top right corner) represents the drop down menu.

http://jsfiddle.net/87G6a/

All comments/answers are much appreciated and will be voted up.

Thank you.

Solution

  • This may be what you are looking for.

    http://jsfiddle.net/defmetalhead/2ezsP/

    $('.mainMenu').children('li').on('click', function() {
   $(this).children('ul').slideToggle('slow'); 
});

    Everything in that code can be done a different(better) way. However, check this updated fiddle. http://jsfiddle.net/defmetalhead/87G6a/2/

     .find('h2')
    .bind('click focus', function () {
    $('ul').slideToggle('slow');
  });

    BE a bit more specfic as to what you need.