Alex Alex - 2 months ago 6
jQuery Question

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.

Answer

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.

Comments