Tech or Treat! Write an article about your scariest tech disaster to win gadgets!Learn more


jquery dynamic content

Posted on 2010-11-21
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 …
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

647 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