External resources loaded into this fiddle:
$(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() {
$(this).find('li').animate({
marginLeft: -150,
marginRight: -150
}, 'slow');
});
/* Preventing the default event (which would be to navigate the browser to the link's address) */
e.preventDefault();
})
});