jquery dynamic content

Posted on 2010-11-21
Last Modified: 2012-05-10

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?

Question by:Eternal_Student

Expert Comment

ID: 34183816
I recommend using Animated Collapse:

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 ;).

Expert Comment

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

or using jquery BBQ

  it handles your back button nicely too


Expert Comment

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>

Open in new window

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

	$('.accordion .head').click(function() {
	var nextId = $(this).next().id;
	  url: 'accodianData.asmx',
	  data: '{ selectedid : ' + nextId + ',
	  success: function(data) {
	    alert('Load was performed.');
		return false;

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

Open in new window

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

LVL 18

Author Comment

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?
LVL 18

Accepted Solution

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

Author Closing Comment

ID: 34941235
I found what i need

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTTPS jquery doesn't work 9 59
Where is java script information saved? 2 50
Javasctipt 2 24
Javascript_Set_dropdown_value 7 32
Shoutout to Emily Plummer ( 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…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn how to count occurrences of each item in an array.

786 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