Opening JQuery Accordion on different slides.

BrighteyesDesign
BrighteyesDesign used Ask the Experts™
on
I have a JQuery Accordion menu on my site but i'm struggling to open the Accordion on anything other than slide 1.

There's a line in the .js file (attached):

var $firstSlide = $slides.filter(':first');

I have tried setting this to 'second', '2', 'slide2' ....with no joy.

I have also attached the Accordion code for the HTML page

Any ideas how I can get this to work?
ul id="accordion1">
                  <li class="slide1">
                    <div class="slide_handle"><div></div></div>
                    <div class="slide_content">
                      <a class="image" href="http://www.iris-technology.co.uk/"><img alt="Iris Technology" width="703" height="253" src="images/wide-satelitte.jpg" /></a>
                     
                    </div>
                    </li>
                  <li class="slide2">
                    <div class="slide_handle"><div></div></div>
                    <div class="slide_content">
                      <a class="image" href="AutomotiveOEM.html"><img alt="Automotive OEM" width="703" height="253" src="images/wide-car.jpg" /></a>
                   
                    </div>
                    </li>
                  <li class="slide3">
                    <div class="slide_handle"><div></div></div>
                    <div class="slide_content">
                      <a class="image" href="FleetManagement.html"><img alt="Fleet Management" width="703" height="253" src="images/wide-van.jpg" /></a>
                     
                    </div>
                    </li>
                  <li class="slide4">
                    <div class="slide_handle"><div></div></div>
                    <div class="slide_content">
                      <a class="image" href="WhiteLabel.html"><img alt="White Label" width="703" height="253" src="images/wide-plan.jpg" /></a>
                     
                    </div>
                    </li>
                  <li class="slide5">
                    <div class="slide_handle"><div></div></div>
                    <div class="slide_content">
                      <a class="image" href="SoftwarePlatform.html"><img alt="Software Platform" width="703" height="253" src="images/wide-mobile.jpg" /></a>
                      
                    </div>
                    </li>
                  <li class="slide6">
                    <div class="slide_handle"><div></div></div>
                    <div class="slide_content">
                      <a class="image" href="OilAndGas.html"><img alt="Oil & Gas" width="703" height="320" src="images/wide-world.jpg" /></a>
                    
                    </div>
                    </li>
                </ul>

Open in new window

/*
 * Accordionza jQuery Plugin
 * Copyright 2010, Geert De Deckere <geert@idoe.be>
 */
(function($) {

	// Accordionza version
	var version = '1.0.2';

	$.fn.accordionza = function(options) {

		// Merge all the options (recursively)
		var o = $.extend(true, {}, $.fn.accordionza.defaults, options);

		// Loop over each accordion
		this.each(function() {

			// Cache selector operations
			var $accordion = $(this);
			var $slides = $accordion.children('li');
			var $firstSlide = $slides.filter(':first');
			var $lastSlide = $slides.filter(':last');
			var $activeSlide = $slides.filter('.' + o.classSlideOpened);

			// Calculate widths and heights
			var width = $accordion.width();
			var height = $accordion.height();
			var slideMinWidth = (o.slideWidthClosed === false) ? $slides.filter(':not(.' + o.classSlideOpened + '):first').find('.' + o.classHandle + ':first').outerWidth() : o.slideWidthClosed;
			var slideMaxWidth = width - ($slides.length - 1) * slideMinWidth;

			// Handlers for setInterval and setTimeout
			var autoPlayInterval;
			var autoPlayTimeout;

			// Used for o.pauseOnHover functionality
			var autoPlayPaused = false;

			// Setup the accordion (wrapper)
			$accordion.css({
				'position': 'relative',
				'overflow': 'hidden'
			});

			// Setup the slides
			$slides.css({
				'position': 'absolute',
				'top': '0',
				'width': slideMaxWidth + 'px',
				'height': height + 'px'
			});

			// Position each slide
			$slides.each(function(i) {
				// We also store the order for each slide (starting with zero)
				// This will come in handy later
				$(this).css('left', i * slideMinWidth + 'px').data('order', i);
			});

			// Hide the captions
			$('.' + o.classCaption, $slides).css('top', height + 'px');

			// Start autoplaying
			function startAutoPlay() {
				// Make sure we don't start a double interval
				stopAutoPlay();

				autoPlayInterval = setInterval(function() {
					// If not temporarily paused, trigger the next slide
					if ( ! autoPlayPaused) {
						nextSlide().trigger('slide');
					}
				}, o.slideDelay);
			}

			// Stop autoplaying
			function stopAutoPlay() {
				clearInterval(autoPlayInterval);
			}

			// Pause autoplaying for a while
			function pauseAutoPlay(delay) {
				// Set the default delay value
				if (delay === undefined) {
					var delay = o.autoRestartDelay;
				}

				stopAutoPlay();

				// If the delay has been set to false (or 0),
				// we won't restart autoplaying the slides.
				if (delay === false) {
					return;
				}

				// Clear any possible previous calls to this function
				clearTimeout(autoPlayTimeout);

				// Note: on top of the delay value below, you have to add the default o.slideDelay time
				// to get the actual time the next slide gets triggered. This is because setInterval() in
				// startAutoPlay() waits one delay iteration before starting.
				autoPlayTimeout = setTimeout(function() {
					startAutoPlay();
				}, delay);
			}

			// Returns the previous slide
			function prevSlide(loop) {
				if (loop === undefined) {
					var loop = true;
				}
				var $prevSlide = $activeSlide.prev();
				if ($prevSlide.length) {
					return $prevSlide;
				} else if (loop) {
					return $lastSlide;
				} else {
					return $activeSlide;
				}
			}

			// Returns the next slide
			function nextSlide(loop) {
				if (loop === undefined) {
					var loop = true;
				}
				var $nextSlide = $activeSlide.next();
				if ($nextSlide.length) {
					return $nextSlide;
				} else if (loop) {
					return $firstSlide;
				} else {
					return $activeSlide;
				}
			}

			// Some slide was activated by the user
			$slides.bind(o.slideTrigger, function() {
				pauseAutoPlay();
				$(this).trigger('slide');
			});

			// Some slide was activated
			$slides.bind('slide', function() {
				// Ignore clicks on an already opened slide
				if ($(this).hasClass(o.classSlideOpened)) {
					return;
				}

				// Switch the classSlideOpened
				$activeSlide.removeClass(o.classSlideOpened);
				$(this).addClass(o.classSlideOpened);

				// Move all following slides to the right, and all preceding slides to the left
				$slides.filter(':gt(' + $(this).data('order') + ')').each(function() {
					$(this).stop(true).animate({left: slideMaxWidth + ($(this).data('order') - 1) * slideMinWidth + 'px'}, o.slideSpeed, o.slideEasing);
				}).end().filter(':lt(' + ($(this).data('order') + 1) + ')').each(function() {
					$(this).stop(true).animate({left: $(this).data('order') * slideMinWidth + 'px'}, o.slideSpeed, o.slideEasing);
				});

				// Hide the old caption, show the new one
				$('.' + o.classCaption, $activeSlide).stop(true).animate({top: height + 'px'}, o.captionSpeed, o.captionEasing);
				// Note: using delay() here from jQuery 1.4 instead of the "animate({opacity:0},delay)" trick from http://www.learningjquery.com/2007/01/effect-delay-trick
				//       Using opacity here would cause PNG transparency to break in IE
				$('.' + o.classCaption, $(this)).stop(true).delay(o.captionDelay).animate({top: height - o.captionHeight + 'px'}, o.captionSpeed, o.captionEasing);

				// User-defined callbacks
				if ($.isFunction(o.onSlideClose)) {
					o.onSlideClose.call($activeSlide);
				}
				if ($.isFunction(o.onSlideOpen)) {
					o.onSlideOpen.call($(this));
				}

				// Custom event hook
				$.event.trigger('accordionza_slide');

				// Voilà, we've got a new open slide
				$activeSlide = $(this);
			});

			// Animate and toggle the caption
			$slides.find('.' + o.classCaptionToggle).click(function() {
				pauseAutoPlay();

				// Find the caption this classCaptionToggle instance belongs to
				// Note: we don't assume classCaptionToggle is an ancestor of the caption
				var $caption = $(this).closest('li').find('.' + o.classCaption);

				if ( ! $activeSlide.hasClass(o.classCaptionCollapsed)) {
					// Move the caption down
					$caption.stop(true).animate({top: height - o.captionHeightClosed + 'px'}, o.captionSpeed, o.captionEasing);
				} else {
					// Move the caption back up
					$caption.stop(true).animate({top: height - o.captionHeight + 'px'}, o.captionSpeed, o.captionEasing);
				}

				$activeSlide.toggleClass(o.classCaptionCollapsed);
			});

			// Keyboard navigation
			if (o.navKey) {
				$(document.documentElement).keyup(function(event) {
					// Left arrow key
					if (event.which == 37) {
						prevSlide().trigger(o.slideTrigger);
					// Right arrow key
					} else if (event.which == 39) {
						nextSlide().trigger(o.slideTrigger);
					}
				});
			}

			// Open up the start slide.
			// Note: this code needs to come after the 'slide' binding to $slides.
			if ($activeSlide.length) {
				// If a slide with the classSlideOpened exists,
				// we trigger the previous one so the correct slide opens up.
				prevSlide().trigger('slide');
			} else {
				// If no slide with the classSlideOpened is found,
				// we open up the first slide.
				$lastSlide.addClass(o.classSlideOpened);
				$activeSlide = $lastSlide;
				$firstSlide.trigger('slide');
			}

			// Start autoplaying
			if (o.autoPlay) {
				// Temporarily pause the slideshow on hover
				if (o.pauseOnHover) {
					$accordion.mouseenter(function() {
						autoPlayPaused = true;
					}).mouseleave(function() {
						autoPlayPaused = false;
					});
				}

				startAutoPlay();
			}
		});

		// Make chainable
		return this;
	};

	// The complete list of default options
	$.fn.accordionza.defaults = {
		autoPlay:              false,
		autoRestartDelay:      false,
		captionDelay:          0,
		captionEasing:         'swing',
		captionHeight:         50,
		captionHeightClosed:   0,
		captionSpeed:          500,
		classSlideOpened:      'slide_opened',
		classCaption:          'slide_caption',
		classCaptionCollapsed: 'slide_caption_collapsed',
		classCaptionToggle:    'slide_caption_toggle',
		classHandle:           'slide_handle',
		navKey:                false,
		onSlideClose:          null,
		onSlideOpen:           null,
		pauseOnHover:          false,
		slideDelay:            5000,
		slideEasing:           'swing',
		slideSpeed:            500,
		slideTrigger:          'click',
		slideWidthClosed:      false
	};

})(jQuery);

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Greg AlexanderLead Developer

Commented:
Can you post the code that you are using to initialize it?

Author

Commented:
Ah yes of course, here it is...
$(document).ready(function() {

	// Accordion Demo #1
	$('#accordion1').accordionza({
		autoPlay: true,
		captionDelay: 1000,
		captionEasing: 'easeOutBounce',
		captionHeight: 40,
		captionHeightClosed: 10,
		navKey: true,
		slideDelay: 4000
		
	});

});

Open in new window

Greg AlexanderLead Developer

Commented:
What version of jQuery are you using?
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Yes, that would help too!

Here's the other scripts called in the header:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
Greg AlexanderLead Developer

Commented:
Him... I can't get it to work at all lol.. Do you have a test page that is live?

Author

Commented:
Sure do...

http://www.brighteyesdesign.co.uk/iris/test.html

Thanks for your patience!
Lead Developer
Commented:
Here will be the new initalization script:

Note: change slide2 to which ever slide you want to open first

$(document).ready(function() {

	// Accordion Demo #1
	$('#accordion1').accordionza({
		autoPlay: true,
		captionDelay: 1000,
		captionEasing: 'easeOutBounce',
		captionHeight: 40,
		captionHeightClosed: 10,
		navKey: true,
		slideDelay: 4000,
		firstSlide: 'slide2'
	});

});

Open in new window



Then here is the new plugin

	<script>
	/*
 * Accordionza jQuery Plugin
 * Copyright 2010, Geert De Deckere <geert@idoe.be>
 */
(function($) {

	// Accordionza version
	var version = '1.0.2';

	$.fn.accordionza = function(options) {
		// Merge all the options (recursively)
		var o = $.extend(true, {}, $.fn.accordionza.defaults, options);

		// Loop over each accordion
		this.each(function() {
			// Cache selector operations
			var $accordion = $(this);
			var $slides = $accordion.children('li');
			var $firstSlide = $("."+o.firstSlide);
			var $lastSlide = $slides.filter(':last');
			var $activeSlide = $slides.filter('.' + o.classSlideOpened);

			// Calculate widths and heights
			var width = $accordion.width();
			var height = $accordion.height();
			var slideMinWidth = (o.slideWidthClosed === false) ? $slides.filter(':not(.' + o.classSlideOpened + '):first').find('.' + o.classHandle + ':first').outerWidth() : o.slideWidthClosed;
			var slideMaxWidth = width - ($slides.length - 1) * slideMinWidth;

			// Handlers for setInterval and setTimeout
			var autoPlayInterval;
			var autoPlayTimeout;

			// Used for o.pauseOnHover functionality
			var autoPlayPaused = false;

			// Setup the accordion (wrapper)
			$accordion.css({
				'position': 'relative',
				'overflow': 'hidden'
			});

			// Setup the slides
			$slides.css({
				'position': 'absolute',
				'top': '0',
				'width': slideMaxWidth + 'px',
				'height': height + 'px'
			});

			// Position each slide
			$slides.each(function(i) {
				// We also store the order for each slide (starting with zero)
				// This will come in handy later
				$(this).css('left', i * slideMinWidth + 'px').data('order', i);
			});

			// Hide the captions
			$('.' + o.classCaption, $slides).css('top', height + 'px');

			// Start autoplaying
			function startAutoPlay() {
				// Make sure we don't start a double interval
				stopAutoPlay();

				autoPlayInterval = setInterval(function() {
					// If not temporarily paused, trigger the next slide
					if ( ! autoPlayPaused) {
						nextSlide().trigger('slide');
					}
				}, o.slideDelay);
			}

			// Stop autoplaying
			function stopAutoPlay() {
				clearInterval(autoPlayInterval);
			}

			// Pause autoplaying for a while
			function pauseAutoPlay(delay) {
				// Set the default delay value
				if (delay === undefined) {
					var delay = o.autoRestartDelay;
				}

				stopAutoPlay();

				// If the delay has been set to false (or 0),
				// we won't restart autoplaying the slides.
				if (delay === false) {
					return;
				}

				// Clear any possible previous calls to this function
				clearTimeout(autoPlayTimeout);

				// Note: on top of the delay value below, you have to add the default o.slideDelay time
				// to get the actual time the next slide gets triggered. This is because setInterval() in
				// startAutoPlay() waits one delay iteration before starting.
				autoPlayTimeout = setTimeout(function() {
					startAutoPlay();
				}, delay);
			}

			// Returns the previous slide
			function prevSlide(loop) {
				if (loop === undefined) {
					var loop = true;
				}
				var $prevSlide = $activeSlide.prev();
				if ($prevSlide.length) {
					return $prevSlide;
				} else if (loop) {
					return $lastSlide;
				} else {
					return $activeSlide;
				}
			}

			// Returns the next slide
			function nextSlide(loop) {
				if (loop === undefined) {
					var loop = true;
				}
				var $nextSlide = $activeSlide.next();
				if ($nextSlide.length) {
					return $nextSlide;
				} else if (loop) {
					return $firstSlide;
				} else {
					return $activeSlide;
				}
			}

			// Some slide was activated by the user
			$slides.bind(o.slideTrigger, function() {
				pauseAutoPlay();
				$(this).trigger('slide');
			});

			// Some slide was activated
			$slides.bind('slide', function() {
				// Ignore clicks on an already opened slide
				if ($(this).hasClass(o.classSlideOpened)) {
					return;
				}

				// Switch the classSlideOpened
				$activeSlide.removeClass(o.classSlideOpened);
				$(this).addClass(o.classSlideOpened);

				// Move all following slides to the right, and all preceding slides to the left
				$slides.filter(':gt(' + $(this).data('order') + ')').each(function() {
					$(this).stop(true).animate({left: slideMaxWidth + ($(this).data('order') - 1) * slideMinWidth + 'px'}, o.slideSpeed, o.slideEasing);
				}).end().filter(':lt(' + ($(this).data('order') + 1) + ')').each(function() {
					$(this).stop(true).animate({left: $(this).data('order') * slideMinWidth + 'px'}, o.slideSpeed, o.slideEasing);
				});

				// Hide the old caption, show the new one
				$('.' + o.classCaption, $activeSlide).stop(true).animate({top: height + 'px'}, o.captionSpeed, o.captionEasing);
				// Note: using delay() here from jQuery 1.4 instead of the "animate({opacity:0},delay)" trick from http://www.learningjquery.com/2007/01/effect-delay-trick
				//       Using opacity here would cause PNG transparency to break in IE
				$('.' + o.classCaption, $(this)).stop(true).delay(o.captionDelay).animate({top: height - o.captionHeight + 'px'}, o.captionSpeed, o.captionEasing);

				// User-defined callbacks
				if ($.isFunction(o.onSlideClose)) {
					o.onSlideClose.call($activeSlide);
				}
				if ($.isFunction(o.onSlideOpen)) {
					o.onSlideOpen.call($(this));
				}

				// Custom event hook
				$.event.trigger('accordionza_slide');

				// Voilà, we've got a new open slide
				$activeSlide = $(this);
			});

			// Animate and toggle the caption
			$slides.find('.' + o.classCaptionToggle).click(function() {
				pauseAutoPlay();

				// Find the caption this classCaptionToggle instance belongs to
				// Note: we don't assume classCaptionToggle is an ancestor of the caption
				var $caption = $(this).closest('li').find('.' + o.classCaption);

				if ( ! $activeSlide.hasClass(o.classCaptionCollapsed)) {
					// Move the caption down
					$caption.stop(true).animate({top: height - o.captionHeightClosed + 'px'}, o.captionSpeed, o.captionEasing);
				} else {
					// Move the caption back up
					$caption.stop(true).animate({top: height - o.captionHeight + 'px'}, o.captionSpeed, o.captionEasing);
				}

				$activeSlide.toggleClass(o.classCaptionCollapsed);
			});

			// Keyboard navigation
			if (o.navKey) {
				$(document.documentElement).keyup(function(event) {
					// Left arrow key
					if (event.which == 37) {
						prevSlide().trigger(o.slideTrigger);
					// Right arrow key
					} else if (event.which == 39) {
						nextSlide().trigger(o.slideTrigger);
					}
				});
			}

			// Open up the start slide.
			// Note: this code needs to come after the 'slide' binding to $slides.
			if ($activeSlide.length) {
				// If a slide with the classSlideOpened exists,
				// we trigger the previous one so the correct slide opens up.
				prevSlide().trigger('slide');
			} else {
				// If no slide with the classSlideOpened is found,
				// we open up the first slide.
				$lastSlide.addClass(o.classSlideOpened);
				$activeSlide = $lastSlide;
				$firstSlide.trigger('slide');
			}

			// Start autoplaying
			if (o.autoPlay) {
				// Temporarily pause the slideshow on hover
				if (o.pauseOnHover) {
					$accordion.mouseenter(function() {
						autoPlayPaused = true;
					}).mouseleave(function() {
						autoPlayPaused = false;
					});
				}

				startAutoPlay();
			}
		});

		// Make chainable
		return this;
	};

	// The complete list of default options
	$.fn.accordionza.defaults = {
		autoPlay:              false,
		autoRestartDelay:      false,
		captionDelay:          0,
		captionEasing:         'swing',
		captionHeight:         50,
		captionHeightClosed:   0,
		captionSpeed:          500,
		classSlideOpened:      'slide_opened',
		classCaption:          'slide_caption',
		classCaptionCollapsed: 'slide_caption_collapsed',
		classCaptionToggle:    'slide_caption_toggle',
		classHandle:           'slide_handle',
		navKey:                false,
		onSlideClose:          null,
		onSlideOpen:           null,
		pauseOnHover:          false,
		slideDelay:            5000,
		slideEasing:           'swing',
		slideSpeed:            500,
		slideTrigger:          'click',
		slideWidthClosed:      false
	};

})(jQuery);
	</script>

Open in new window


Author

Commented:
You're an absolute superstar!

It's Sunday 9.00pm here and I can now stop working!
Greg AlexanderLead Developer

Commented:
Thanks You!, enjoy the rest of your evening :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial