Solved

jquery dynamic content

Posted on 2010-11-21
6
600 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
[X]
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
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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

730 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