Member Avatar for 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!

  • 1 Contributor
  • 1 Reply
  • 182 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by gilroda
Member Avatar for 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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.