Javascript slide down menu

I'm trying to find something similar to the 'Table of Contents' drop do开发者_开发知识库wn at the top located at http://codeigniter.com/user_guide/ but for jQuery. It looks like that site uses the moo tools fx library. Does anyone know of an already existing plugin for jQuery that does the same thing or easy javascript code to accomplish the same sliding effect for that menu?

It's right there in the core; http://api.jquery.com/slideDown/ . Just call that function in a link's onclick event and you should be good to go.

$('a.expand').click(function() {
  $('#toc').slideToggle(); // slide up if down, down if up.
});

To achieve that exact effect you'll just have to use the slideToggle() function built into jQuery.

$('#toggleButton').click(function(){
    $('#tableOfContents').slideToggle();
});

You'll need to wrap the table of contents in and have a link/button/whatever width id="toggleButton" to activate it. Make sure the button is outside the table of contents though!

You can check out this links -

http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/

http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/

You can even google out for more. There are many of them available.

You can use the jQuery .slideDown() and .slideUp methods.

http://api.jquery.com/slideDown/

However something as big as that menu you probably want to call in on the fly with ajax with the callback function on slideDown.

Edit : The reason I recommend calling in the menu with AJAX is because of the usability/accessibility issue cause by having around 100 links off screen that a keyboard user can still tab through. It would take ages for a keyboard user to tab through all the off screen links to finally come to the "Table of Contents" link that activates the menu and then to shift tab back to the one he/she wants...terrible. The menu already does not work with JS off. (There is a link to the Table of Contents page below instead). Therefore calling the menu in with AJAX and giving the first link of the menu focus() is a much better solution.

Yep, it's mootools Fx.Slide. In jQuery you should use slideDown (http://api.jquery.com/slideDown/)