JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

JQuery: Need Help Embedding Link in Accordion Menu

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Jun 2006
Posts: 5
Reputation: gilroda is an unknown quantity at this point 
Solved Threads: 0
gilroda gilroda is offline Offline
Newbie Poster

JQuery: Need Help Embedding Link in Accordion Menu

 
0
  #1
Dec 18th, 2008
Hello,

I need help with embedding links within a Jquery Accordion.

The code I am using is based on Jörn Zaefferer's JQuery Accordion plugin, with some modifications to allow for an embedded link within each accordion div. The accordion effect looks and works just fine when viewed in Safari and Firefox. However, when viewed in Explorer 6.0 and above, the accordion effect is gone and each accordion div is open and displayed instead of just one being open and the rest closed and hidden.

I suspect the problem is in the Javascript but I'm not much of a programmer so any help would be greatly appreciated.

The Javascript

JavaScript Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2. 	jQuery().ready(function(){
  3. 		// simple accordion
  4. 		jQuery('#list1a').accordion({
  5. 			header: '.main', });
  6. 		jQuery('#list1b').accordion({
  7. 			header: '.main', 
  8. 			autoheight: false
  9. 		});
  10. 			});
  11. 	</script>


The Code


html Syntax (Toggle Plain Text) 
  1.   <div class="basic" style="float:left;"  id="list1a">
  2. 			<a class="main">THE LINK TO OPEN THE DIV IN ACCORDION EFFECT</a>
  3. 			<div>
  4. 				<ul>
  5.   					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  6.    					<li>Aliquam tincidunt mauris eu risus.</li>
  7.   					<li>Vestibulum auctor dapibus neque.</li>
  8. 				</ul>
  9. 					<a href="#" class="link">THE LINK I WANT TO EMBED</a>
  10.  
  11. 			</div>
  12.  
  13. <a class="main">THE LINK TO OPEN THE DIV IN ACCORDION EFFECT</a>
  14. 			<div>
  15. 				<ul>
  16.   					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  17.    					<li>Aliquam tincidunt mauris eu risus.</li>
  18.   					<li>Vestibulum auctor dapibus neque.</li>
  19. 				</ul>
  20. 					<a href="#" class="link">THE LINK I WANT TO EMBED</a>
  21.  
  22. 			</div>
  23. </div>



Thanks!
Last edited by peter_budo; Dec 18th, 2008 at 7:57 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 5
Reputation: gilroda is an unknown quantity at this point 
Solved Threads: 0
gilroda gilroda is offline Offline
Newbie Poster

Re: JQuery: Need Help Embedding Link in Accordion Menu

 
0
  #2
Dec 18th, 2008
•
•
•
•
Originally Posted by gilroda View Post
Hello,

I need help with embedding links within a Jquery Accordion.

The code I am using is based on Jörn Zaefferer's JQuery Accordion plugin, with some modifications to allow for an embedded link within each accordion div. The accordion effect looks and works just fine when viewed in Safari and Firefox. However, when viewed in Explorer 6.0 and above, the accordion effect is gone and each accordion div is open and displayed instead of just one being open and the rest closed and hidden.

I suspect the problem is in the Javascript but I'm not much of a programmer so any help would be greatly appreciated.

The Javascript

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2. 	jQuery().ready(function(){
  3. 		// simple accordion
  4. 		jQuery('#list1a').accordion({
  5. 			header: '.main', });
  6. 		jQuery('#list1b').accordion({
  7. 			header: '.main', 
  8. 			autoheight: false
  9. 		});
  10. 			});
  11. 	</script>


The Code


JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <div class="basic" style="float:left;"  id="list1a">
  2. 			<a class="main">THE LINK TO OPEN THE DIV IN ACCORDION EFFECT</a>
  3. 			<div>
  4. 				<ul>
  5.   					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  6.    					<li>Aliquam tincidunt mauris eu risus.</li>
  7.   					<li>Vestibulum auctor dapibus neque.</li>
  8. 				</ul>
  9. 					<a href="#" class="link">THE LINK I WANT TO EMBED</a>
  10.  
  11. 			</div>
  12.  
  13. <a class="main">THE LINK TO OPEN THE DIV IN ACCORDION EFFECT</a>
  14. 			<div>
  15. 				<ul>
  16.   					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  17.    					<li>Aliquam tincidunt mauris eu risus.</li>
  18.   					<li>Vestibulum auctor dapibus neque.</li>
  19. 				</ul>
  20. 					<a href="#" class="link">THE LINK I WANT TO EMBED</a>
  21.  
  22. 			</div>
  23. </div>



Thanks!
The problem was with the Javascript. By adding autoheight: true to the above code the accordion now works as intended in IE browser versions as well as Safari and FF.

Here's the code as modified:

<script type="text/javascript">
	jQuery().ready(function(){
		jQuery('#list1a').accordion({
			header: '.main',
			authoheight: true});
		jQuery('#list1b').accordion({
			header: '.main', 
				autoheight: false
		});
			});
	</script>
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column createrange() css cursor date debugger dependent disablefirebug dom download dropdown editor element embed engine error events explorer ext file form forms getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl math media microsoft mimic object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post problem programming progressbar regex runtime scroll search security select shopping size software sql text textarea unicode w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC