Change content of div when clicking on link/button

Question

Basically I have a web page that has a div id="content" and a div id="sidebar",

What I would like to do is change the content in the content div when a link/button is clicked in the sidebar without having a serperate page for each article.

The reason being;

I am doing a BIO page for some multiple bands and there would be multiple buttons for each band then when a user clicks the button/link the content would change.

Any idea's, I have been looking into .click using jQuery or maybe PHP but not exactly sure on how to implement it.

Answer 1

You could put each of the articles in one HTML file on your server, each with a div wrapped around it, like this (let's say the file is called myArticles.html and is in the same folder as your main page):

<div id='article1'>
    <b>ARTICLE 1</b> This is my first article
</div>

<div id='article2'>
    <b>ARTICLE 2</b> This is my second article
</div>

Then use jQuery's .load function to load this data using AJAX into your page.

Say your button for article 1 has the id = 'articleButton1' and 2 has id = 'articleButton2' (and both with href='#', so the page doesn't change) then this jQuery would work:

$('#articleButton1').click(function(){
    $('#content').load('myArticles.html #article1');
}

$('#articleButton2').click(function(){
    $('#content').load('myArticles.html #article2');
}

This picks the correct div out of that page on your server and puts it into the #content div