I'm trying to find something similar to the 'Table of Contents' drop down at the top located at / 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 acplish the same sliding effect for that menu?

I'm trying to find something similar to the 'Table of Contents' drop down at the top located at http://codeigniter./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 acplish the same sliding effect for that menu?

• javascript
• jquery
• codeigniter

• Wow... I can't believe I didn't think of that... I was even looking at the slideDown api the other day... – Bot Commented Jan 10, 2011 at 17:17

5 Answers 5

It's right there in the core; http://api.jquery./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./sliding-top-menu-with-jquery/

http://net.tutsplus./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./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 remend 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 e 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./slideDown/)