Load div on click only

I want a div to load only if you click a link. This way my site pages will load faster…

<a href=“#”>load me</a>

<div id=“”>
lots of contents here to load on click

Pls help…

Hi there,

Welcome to the forums :slight_smile:

This sounds like a job for AJAX.
Are you using, or do you mind using jQuery?

Thanks for ur reply sir :slight_smile:
I will use it into site hosted in blogger. I really don’t know what’s their difference… as long as it works it’s fine with me :slight_smile:

Ok, well the difference is that jQuery is a library written in JavaScript, whereas JavaScript itself is a scripting language for browsers.
jQuery is often overkill for small projects, but it does offer a simplified syntax for AJAX stuff, so I’ll use it here.

What we need to do is to make a HTML template, include the jQuery library and attach an event handler to the link that will be responsible for loading the content into the div.

After that we need to create a file that will hold the content we will be loading.
I’ll call mine content.html.

Then we can use jQuery’s .load() method to load the content from content.html into the div.

The whole thing looks like this:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery scaffold</title>
    <a href="#" id="myLink">Click me!</a>
    <div id="result">The text will get loaded here</div>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      $("#myLink").on("click", function(){

You might also find this useful: http://api.jquery.com/load/