Collapse and Expand Accordion Header

I have been trying to find a script or tutorial for a menu that will expand and collapse in the header. I have attached two images that show a view when the menu is open and closed. Has anyone seen a script or tutorial showing how this is done? Any tips would be appreciated.

Closed Menu


Open Menu

 

How about the jquery effect, animate?
Check the manual ( effects > animate ) on jquery 's website for examples.

 

I looked at the slideToggle function earlier and this is what I can use. Was looking for a specific example or tutorial for using the slideToggle feature. I couldn't find many tutorials for this function.

 

OK, how about this then.
The Jquery function toggle(), can be used to alternate between various effects or whatever.

In this case, you need some kind of selector, like for instance a class name or id: $('.some_class') or $('#some_id').

Lets say you want to use something with the class "the_trigger" as the trigger, and you want to expand/collapse something with the class "to_be_toggled" every other click on your trigger.

Then your code could look like this:

$(function() {

 $('.the_trigger').toggle(
 function () {
  $('.to_be_toggled').slideToggle(300);
 },
 function () {
  $('.to_be_toggled').slideToggle(300);
 });

});

Code (markup):

When you click on the element with the class "the_trigger" the element with the class "to_be_toggled" will expand and collapse with a pretty animation.