CODEWITHSUNDEEP
phpjqueryhtml
SamCulley
SamCulley

Reputation: 83

Change content of div when clicking on link/button

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.

Upvotes: 5

Views: 19404

Answers (3)

Timm
Timm

Reputation: 12753

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

Upvotes: 7

scald
scald

Reputation: 729

what about jQuery UI vertical tabs? http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html

more on jQuery UI tabs and loading content via ajax: http://jqueryui.com/demos/tabs/#ajax

Upvotes: 1

Khurram
Khurram

Reputation: 711

you need to look into this tutorial,

Tabify

Upvotes: 1

Related Questions