Alex Alex - 17 days ago 5x
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
.bind('click focus', function(){

Code taken from:

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


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.

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

Thank you.


This may be what you are looking for.

$('.mainMenu').children('li').on('click', function() {

Everything in that code can be done a different(better) way. However, check this updated fiddle.

    .bind('click focus', function () {

BE a bit more specfic as to what you need.