Solved

jquery dynamic content

Posted on 2010-11-21
6
599 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
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

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

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