asked on

jquery dynamic content

Hi,

I have an accordion style menu on the left hand side of my page with various links.

I want each link to reveal a div/section of content upon click. So all of the content makrup is loaded but hidden and depending on the link clicked it is revealed.

Is there any simple jquery I can use for this?

Thanks

str82no1

I recommend using Animated Collapse:

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Very simple to use, you create hidden divs, and using this JavaScript code you'll be able to show them based on a click or based on any trigger you want.

I hope it helps you ;).

dxdinh

if you already use jQuery I would load page using AJAX - so the initial loading the page won't be so heavy

checkout ajaxify
http://plugins.jquery.com/project/jquery-ajaxify

or using jquery BBQ
http://benalman.com/projects/jquery-bbq-plugin/

it handles your back button nicely too

saifikram_md

consider the following html

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div id="acc1">First content</div>
    <h3><a href="#">Second header</a></h3>
    <div id="acc2">Second content</div>
</div>

Open in new window

the respective jquery script for handling ajax based display of items would be :-

jQuery(document).ready(function(){
	$('.accordion .head').click(function() {
	var nextId = $(this).next().id;
	$.ajax({
	  url: 'accodianData.asmx',
	  data: '{ selectedid : ' + nextId + ',
	  success: function(data) {
	    $('#'+nextId).html(data);
	    alert('Load was performed.');
	  }
	});
		$(this).next().toggle('slow');
		return false;
	}).next().hide();
});

This is an illustration of what can be done to achieve your requirement.

Open in new window

Eternal_Student

ASKER

Could someone kindly provide a working example of a list of links that, when clicked, show only a section of content in the code at a time?

ASKER CERTIFIED SOLUTION

Eternal_Student

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Eternal_Student

ASKER

I found what i need