ajax中slidedown,JQuery slidedown menu without ajax

I copied part of their js.

// populates the menu according to what link was clicked, opens it if not already opened

populateMenu: function (currentLink) {

dd.removeClass(pages);

dd.addClass(currentLink + " open");

dd.slideDown(speed, function () {

// callback that runs after menu finishes sliding down

$("nav ul li.menu>a.active").find("span").html(upArrow);

// ajax call is below; it appends a timestamp to prevent caching, in case of dynamic content; remove if you like

dd.load(dir + "/" + currentLink + ext + "?" + new Date().getTime(), function () {

// callback that runs after menu finishes loading

dd.removeClass("loading");

addCloseLink();

});

});

// change the hash according to the clicked link

document.location.hash = currentLink;

},

If you change the dd.load call for a modify statement with jQuery like dd.html(...) with the content of your choice, you do not have to use ajax.

If you remove the document.location.hash = currentLink; line at the end of the function, it will not modify your back/forward navigation.

That would end up looking something like:

populateMenu: function (currentLink) {

dd.removeClass(pages);

dd.addClass(currentLink + " open");

dd.slideDown(speed, function () {

// callback that runs after menu finishes sliding down

$("nav ul li.menu>a.active").find("span").html(upArrow);

dd.html($('#your_source_here'));

dd.removeClass("loading");

addCloseLink();

});

},

Edit:

You could also use a jQueryUI tabs with collapsible content, see demo here. It would require styling but should work with maybe less work than adapting the previous code.

See this jsFiddle for a basic example. Only the styling of the tabs need to be done.