I have a wordpress page that contains a left side and a right side. In the left side I’m going to have a load of info on design and in the right it will have a load of info on marketing.
Each side has a series of sub categories, so within design it has branding, print etc etc. The right side (marketing) has it’s own sub categories. Essentially these are just links.
This is what I want to happen:
When the user clicks any of the links (these are the subcategories) on the left side I want it to load some info below it. If they click another link it will replace that info with some more info. The same should happen with the right side.
So essentially I want a load of links on the left side to load info into a div on that side and a load of links on the right to load info into a div on that side.
So I want the left and right side to work independently from each other.
What would be the best way to go about this?
UPDATE:
<div id="design">
<h1 style="width:65px;">Design</h1>
<a href="test-link">Branding</a>, <a href="test-link">Print</a>
<div id="design-services">
</div>
</div>
<div id="marketing">
<h1 style="width:95px;">Marketing</h1>
<a href="test-link">Advertising</a>, <a href="test-link">Campaigns</a>
<div id="marketing-services">
</div>
</div>
So the links within the design div would change the info within the design-services div and the links within the marketing div will change the info in the marketing-services div. All without reloading the page.
This is the first solution that comes to mind.
http://jsfiddle.net/pQKUc/15/e
Let me know if you need further clarification. 🙂
HTH