Solved

jquery dynamic content

Posted on 2010-11-21
6
596 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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
The viewer will learn how to count occurrences of each item in an array.
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…

706 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

18 Experts available now in Live!

Get 1:1 Help Now