We help IT Professionals succeed at work.
Get Started
Opening JQuery Accordion on different slides.
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?
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>
/*
* 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);
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