JQuery: Need Help Embedding Link in Accordion Menu

[gilroda]

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

<script type="text/javascript">
	jQuery().ready(function(){
		// simple accordion
		jQuery('#list1a').accordion({
			header: '.main', });
		jQuery('#list1b').accordion({
			header: '.main', 
			autoheight: false
		});
			});
	</script>

The Code

<div class="basic" style="float:left;"  id="list1a">
			<a class="main">THE LINK TO OPEN THE DIV IN ACCORDION EFFECT</a>
			<div>
				<ul>
  					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   					<li>Aliquam tincidunt mauris eu risus.</li>
  					<li>Vestibulum auctor dapibus neque.</li>
				</ul>
					<a href="#" class="link">THE LINK I WANT TO EMBED</a>
				
			</div>

<a class="main">THE LINK TO OPEN THE DIV IN ACCORDION EFFECT</a>
			<div>
				<ul>
  					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   					<li>Aliquam tincidunt mauris eu risus.</li>
  					<li>Vestibulum auctor dapibus neque.</li>
				</ul>
					<a href="#" class="link">THE LINK I WANT TO EMBED</a>
				
			</div>
</div>

Thanks!

[gilroda]

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

<script type="text/javascript">
	jQuery().ready(function(){
		// simple accordion
		jQuery('#list1a').accordion({
			header: '.main', });
		jQuery('#list1b').accordion({
			header: '.main', 
			autoheight: false
		});
			});
	</script>

The Code

<div class="basic" style="float:left;"  id="list1a">
			<a class="main">THE LINK TO OPEN THE DIV IN ACCORDION EFFECT</a>
			<div>
				<ul>
  					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   					<li>Aliquam tincidunt mauris eu risus.</li>
  					<li>Vestibulum auctor dapibus neque.</li>
				</ul>
					<a href="#" class="link">THE LINK I WANT TO EMBED</a>
				
			</div>

<a class="main">THE LINK TO OPEN THE DIV IN ACCORDION EFFECT</a>
			<div>
				<ul>
  					<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   					<li>Aliquam tincidunt mauris eu risus.</li>
  					<li>Vestibulum auctor dapibus neque.</li>
				</ul>
					<a href="#" class="link">THE LINK I WANT TO EMBED</a>
				
			</div>
</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>