How to get div's to load on click not when page loads?

Question

Hello,

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

From your description, it sounds like these divs are not displayed until the top-level menu item is clicked. If this is the case, you can use jquery to insert the sub-menu divs into the DOM when it is opened.

You can find a decent tutorial on Javascript/DOM Manipulation at w3schools.

Answer 2

I'm not sure the accordion control is what you are after - check out JQuery tabs - you can load the content via Ajax which will prevent them loading all at once. An explanation of how to do this is here

Answer 3

I would suggest looking at jquery-ui tabs if you want to load the content in dynamically. Currently I have not seen an accordian plugin that will handle it, which makes sense as an accordian needs to know the height of the content, also if when you clicked a panel you had to wait for dynamic content it would appear jerky. Tabs is your best and most appropriate way to move forward.

Answer 4

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
  }
}