troubleshooting Question

Opening JQuery Accordion on different slides.

Avatar of BrighteyesDesign
BrighteyesDesignFlag for Afghanistan asked on
JavaScript
9 Comments1 Solution1158 ViewsLast Modified:
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

ASKER CERTIFIED SOLUTION
Greg Alexander
Lead Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 9 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 9 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros