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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

809 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