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.