Take the 2-minute tour ×

I'm not sure what this is called so I apologize if it's been covered already - if you go to this page you'll see that when a link is clicked new content shows to the right.

Is there a tutorial that will show me how to do this?

share|improve this question

closed as not constructive by gdoron, Matti Virkkunen, Roko C. Buljan, Kev May 6 '12 at 22:59


How did ??? do something isn't a valid question at so, I'm afraid it will be closed soon. I gave you an example how you can implement such a thing with ajax calls to the server. –  gdoron May 5 '12 at 21:12

2 Answers 2

It can be done with something like this:

$('a.menu').click(function() {
        url: "server.php",
        data: this.id,
        success: function(html) {
    return false;
share|improve this answer

Firstly, you should read something about, how jQuery works, here you will find some tutorials: http://docs.jquery.com/Tutorials

Whenever you will need to find some function, try http://api.jquery.com

And you should also know, what is it DOM and learn basics of javascript: http://www.w3schools.com/js/default.asp


You need to bind somehow click event to anchor tags. For example, lets these anchor tags have class .menu.

Using $('a.menu') you will select all tags <a class='menu'>. The syntax is almost same as syntax for css selectors. You want to bind click event to them, so:

$('a.menu').bind('click', function() {
      // let's do something

This will bind the click event to each <a class='menu'> tag, and call the function when clicked. Inside the function, you can use magic this, which represents the clicked element (chrome has great javascript debugging options, you can learn a lot using it for js development).

Now, imagine you have many <div class='text'> elements containing the text.

Firstly, we should have give them names, like <div id='text-about' class='text'>, <div id='text-contact' class='text'>, etc...

Hide them all $('div.text').hide(); and show them only after clicking to appropriate anchor element:

      // suppose <a id='about' class='menu'> tag
      $('div.text').hide(); // hide all texts
      $('#text-' + this.id).show(); // show the one with id=text-about

And that is all.

share|improve this answer
bind is depreciated, use on instead. "As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document."source –  Michel Ayres May 5 '12 at 21:37
