Question

I am currently building an making my new website. It uses one page and uses a jQuery accordian menu to load the content. The content it split up in six different div’s and all load as soon as the page is accessed. I want it to load each div when the link to it is clicked on. To decrease the page loading time.

You can see this in action on my work in progress site here: http://is.gd/1p1Ys

Since I didn’t make the jQuery script and I am really bad at JavaScript/jQuery I don’t have a clue what to do. So I am wondering if anybody here can help me out.

Thanks a ton,

Ryan

Answer 1

I agree with the other answers that jquery-ui tabs does this exact thing, but you can hack your accordian.js file pretty easily… just change the hrefs in your navigation to point to external html files containing the content you want, i.e. href=”#lifestream” => href=”lifestream.html”,

and then in accordian.js:

$links.click(function () {
  var link = this,
  if(!link.href.match(/^#.*/)) { //if the href doesn't start with '#'
    loadDiv(link.href);
  } else {
    doRestOfFunction(); //everything your script is currently doing.
  }
});

function loadDiv(href) {
  $.get(href, function(html) {
   var newDiv = $(html)
   $(".panels").append(newDiv);
   newDiv.hide();
   doRestOfFunction(); //same as above
  }
}