We help IT Professionals succeed at work.
Get Started

Opening JQuery Accordion on different slides.

BrighteyesDesign
on
1,156 Views
Last Modified: 2012-05-11
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
Lead Developer
Commented:
This problem has been solved!
Unlock 1 Answer and 9 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE