Solved

jquery dynamic content

Posted on 2010-11-21
6
597 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:Eternal_Student
6 Comments
 
LVL 5

Expert Comment

by:str82no1
ID: 34183816
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 ;).
0
 
LVL 7

Expert Comment

by:dxdinh
ID: 34184299
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


0
 
LVL 3

Expert Comment

by:saifikram_md
ID: 34184479
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




0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 18

Author Comment

by:Eternal_Student
ID: 34214302
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?
0
 
LVL 18

Accepted Solution

by:
Eternal_Student earned 0 total points
ID: 34218085
Found a really good example here actually:

http://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/jQuery.html#
0
 
LVL 18

Author Closing Comment

by:Eternal_Student
ID: 34941235
I found what i need
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

27 Experts available now in Live!

Get 1:1 Help Now