Re: Howto: FAQ stlye drop down

[Taufik Nurrohman]

Animate the

element as a callback: http://jsfiddle.net/tovic/kw7LD/23/embedded/result,resources,js/

$(document).ready(function() { /* This code is executed after the DOM has been completely loaded */



/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */

$.easing.def = "easeOutBounce";



/* Binding a click event handler to the links: */

$('li.button a').click(function(e) {



/* Finding the drop down list that corresponds to the current section: */

var dropDown = $(this).parent().next();



/* Closing all other drop down sections, except the current one */

$('.dropdown').not(dropDown).slideUp('slow').find('li').animate({

marginLeft: 0,

marginRight: 0

}, 'slow');

dropDown.slideDown('slow', function() {

/* START CALLBACK */

$(this).find('li').animate({

marginLeft: -150,

marginRight: -150

}, 'slow');

/* END CALLBACK */

});



/* Preventing the default event (which would be to navigate the browser to the link's address) */

e.preventDefault();

})



});

Note: Clear your CSS float by adding clear:both in the hr.thin {} selector:

hr.thin {clear:both;}