Vertical Sliding Accordion with jQuery

@ Eric.
Thanks… I also wanted to make such a change as mike. You helped me 😀

hi,
how to be the first to open the slides?

For some reason when I embed it as an XML gadget there are blank slices 2,4,6,8 and slices 1,3,5,7 are organized 1,2,3,4.

So it appears – 1, blank, 2, blank, 3, blank…

It appears fine when testing the html document.

Any solution to this problem?

Above comment only applicable to example 2 (with easing)

I suppose I can settle for example 1

So I put a thumbnail image in the first slice that clicks to a larger image using fancy box. The fancy box larger image comes up but at the same time the slider div closes that It was in. I want this to stay open. It does the same thing in the demo when you click on a link instead a slice. Basically I want clicking on the H3 title to be what opens and closes each slice. Is this possible? and how would I do it?
Please advise,
thank you,
Allison

….thickbox, that’s the one I use, almost forgot to mention it:)

I modified the jquery.vaccordion.js script to confine the navigation of the according to the title, arrows and scrolling of the mouse (i.e. nothing will happen when you click within a slice).

(function($) {

// Activate Slice Navigation
var slicenav = false;

// cache some values
var cache = {
idx_expanded : -1, // the index of the current expanded slice
sliceH : 0, // the default slice’s height
current : 0, // controls the current slider position
totalSlices : 0 // total number of slices
},
aux = {
// triggered when we click a slice. If the slice is expanded,
// we close it, otherwise we open it..
selectSlice : function( $el, $slices, $navNext, $navPrev, settings ) {

return $.Deferred(
function( dfd ) {

var expanded = $el.data(‘expanded’),
pos = $el.data(‘position’),

itemHeight, othersHeight,

$others = $slices.not( $el );

if (slicenav )
{

// if it’s opened..
if( expanded )
{
$el.data( ‘expanded’, false );
cache.idx_expanded = -1;

// the default values of each slices’s height
itemHeight = cache.sliceH;
othersHeight= cache.sliceH;

// hide the content div
$el.find(‘.va-content’).hide();

// control the navigation buttons visibility
if( aux.canSlideUp( $slices, settings ) )
$navPrev.fadeIn();
else
$navPrev.fadeOut();

if( aux.canSlideDown( $slices, settings ) )
$navNext.fadeIn();
else
$navNext.fadeOut();
}
//if it’s closed..
else
{
$el.data( ‘expanded’, true );
cache.idx_expanded = $el.index();
$others.data( ‘expanded’, false );

//the current slice’s height
itemHeight = settings.expandedHeight;
//the height the other slices will have
othersHeight= Math.ceil( ( settings.accordionH – settings.expandedHeight ) / ( settings.visibleSlices – 1 ) );

// control the navigation buttons visibility
if( cache.idx_expanded > 0 )
$navPrev.fadeIn();
else
$navPrev.fadeOut();

if( cache.idx_expanded < cache.totalSlices – 1 )
$navNext.fadeIn();
else
$navNext.fadeOut();
}
slicenav = false;

// the animation parameters for the clicked slice
var animParam = {
height : itemHeight + 'px',
opacity : 1,
top : ( pos – 1 ) * othersHeight + 'px'
};

// animate the clicked slice and also its title ()
$el.stop()
.animate( animParam, settings.animSpeed, settings.animEasing, function()
{
if( !expanded )
$el.find(‘.va-content’).fadeIn( settings.contentAnimSpeed );
})
.find(‘.va-title’)
.stop()
.animate(
{
lineHeight : cache.sliceH + ‘px’
}, settings.animSpeed, settings.animEasing );

// animate all the others
$others.each(function(i){
var $other = $(this),
posother= $other.data(‘position’),
t;

if( expanded )
t = ( posother – 1 ) * othersHeight ;
else {
if( posother = cache.totalSlices )
return false;
else if( dir === -1 && cache.current === 0 )
return false;

if( dir === -1 && cache.current === 1 )
$navPrev.fadeOut();
else
$navPrev.fadeIn();

if( dir === 1 && cache.current + settings.visibleSlices === cache.totalSlices – 1 )
$navNext.fadeOut();
else
$navNext.fadeIn();
}
else {
if( dir === 1 && cache.idx_expanded === cache.totalSlices – 1 )
return false;
else if( dir === -1 && cache.idx_expanded === 0 )
return false;

if( dir === -1 && cache.idx_expanded === 1 )
$navPrev.fadeOut();
else
$navPrev.fadeIn();

if( dir === 1 && cache.idx_expanded === cache.totalSlices – 2 )
$navNext.fadeOut();
else
$navNext.fadeIn();
}

var $currentSlice = $slices.eq( cache.idx_expanded ),
$nextSlice,
t;

( dir === 1 ) ? $nextSlice = $currentSlice.next() : $nextSlice = $currentSlice.prev();

// if we cannot slide up / down, then we just call the selectSlice for the previous / next slice
if( ( dir === 1 && !aux.canSlideDown( $slices, settings ) ) ||
( dir === -1 && !aux.canSlideUp( $slices, settings ) ) ) {
aux.selectSlice( $nextSlice, $slices, $navNext, $navPrev, settings );
return false;
}

// if we slide down, the top and position of each slice will decrease
if( dir === 1 ) {
cache.current++;
t = ‘-=’ + cache.sliceH;
pos_increment = -1;
}
else {
cache.current–;
t = ‘+=’ + cache.sliceH;
pos_increment = 1;
}

$slices.each(function(i) {
var $slice = $(this),
pos = $slice.data(‘position’);

// all closed or savePositions is false
if( !settings.savePositions || cache.idx_expanded === -1 )
$slice.stop().animate({top : t}, settings.animSpeed, settings.animEasing);
else {
var itemHeight, othersHeight;

// if the slice is the one we should open..
if( i === $nextSlice.index() ) {
$slice.data( ‘expanded’, true );
cache.idx_expanded = $slice.index();
itemHeight = settings.expandedHeight;
othersHeight = ( settings.accordionH – settings.expandedHeight ) / ( settings.visibleSlices – 1 );

$slice.stop()
.animate({
height : itemHeight + ‘px’,
opacity : 1,
top : ( dir === 1 ) ? ( pos – 2 ) * othersHeight + ‘px’ : pos * othersHeight + ‘px’
}, settings.animSpeed, settings.animEasing, function() {
$slice.find(‘.va-content’).fadeIn( settings.contentAnimSpeed );
})
.find(‘.va-title’)
.stop()
.animate({
lineHeight : cache.sliceH + ‘px’
}, settings.animSpeed, settings.animEasing );
}
// if the slice is the one opened, lets close it
else if( $slice.data(‘expanded’) ){
// collapse

$slice.data( ‘expanded’, false );
othersHeight = ( settings.accordionH – settings.expandedHeight ) / ( settings.visibleSlices – 1 );

$slice.stop()
.animate({
height : othersHeight + ‘px’,
opacity : settings.animOpacity,
top : ( dir === 1 ) ? ‘-=’ + othersHeight : ‘+=’ + settings.expandedHeight
}, settings.animSpeed, settings.animEasing )
.find(‘.va-title’)
.stop()
.animate({
lineHeight : othersHeight + ‘px’
}, settings.animSpeed, settings.animEasing )
.end()
.find(‘.va-content’)
.hide();
}
// all the others..
else {
$slice.data( ‘expanded’, false );
othersHeight = ( settings.accordionH – settings.expandedHeight ) / ( settings.visibleSlices – 1 );

$slice.stop()
.animate({
top : ( dir === 1 ) ? ‘-=’ + othersHeight : ‘+=’ + othersHeight
}, settings.animSpeed, settings.animEasing );
}
}
// change the slice’s position
$slice.data().position += pos_increment;
});
},
canSlideUp : function( $slices, settings ) {
var $first = $slices.eq( cache.current );

if( $first.index() !== 0 )
return true;
},
canSlideDown : function( $slices, settings ) {
var $last = $slices.eq( cache.current + settings.visibleSlices – 1 );

if( $last.index() !== cache.totalSlices – 1 )
return true;
}
},
methods = {
init : function( options ) {

if( this.length ) {

var settings = {
// the accordion’s width
accordionW : 825,
// the accordion’s height
accordionH : 400,
// number of visible slices
visibleSlices : 4,
// the height of a opened slice
// should not be more than accordionH
expandedHeight : 300,
// speed when opening / closing a slice
animSpeed : 250,
// easing when opening / closing a slice
animEasing : ‘jswing’,
// opacity value for the collapsed slices
animOpacity : 0.2,
// time to fade in the slice’s content
contentAnimSpeed: 900,
// if this is set to false, then before
// sliding we collapse any opened slice
savePositions : true
};

return this.each(function() {

// if options exist, lets merge them with our default settings
if ( options ) {
$.extend( settings, options );
}

var $el = $(this),
// the accordion’s slices
$slices = $el.find(‘div.va-slice’),
// the navigation buttons
$navNext = $el.find(‘span.va-nav-next’),
$navPrev = $el.find(‘span.va-nav-prev’),
$slicetitle = $el.find(‘h3.va-title’);

// each slice’s height
cache.sliceH = Math.ceil( settings.accordionH / settings.visibleSlices );

// total slices
cache.totalSlices = $slices.length;

// control some user config parameters
if( settings.expandedHeight > settings.accordionH )
settings.expandedHeight = settings.accordionH;
else if( settings.expandedHeight <= cache.sliceH )
settings.expandedHeight = cache.sliceH + 50; // give it a minimum

// set the accordion's width & height
$el.css({
width : settings.accordionW + 'px',
height : settings.accordionH + 'px'
});

// show / hide $navNext
if( settings.visibleSlices < cache.totalSlices )
$navNext.show();

// set the top & height for each slice.
// also save the position of each one.
// as we navigate, the first one in the accordion
// will have position 1 and the last settings.visibleSlices.
// finally set line-height of the title ()
$slices.each(function(i){
var $slice = $(this);
$slice.css({
top : i * cache.sliceH + ‘px’,
height : cache.sliceH + ‘px’
}).data( ‘position’, (i + 1) );
})
.children(‘.va-title’)
.css( ‘line-height’, cache.sliceH + ‘px’ );

// click event
$slicetitle.bind(‘click’, function() {
slicenav = true;
});

// click event
$slices.bind(‘click.vaccordion’, function(e) {
// only if we have more than 1 visible slice.
// otherwise we will just be able to slide.
if( settings.visibleSlices > 1 ) {
var $el = $(this);
aux.selectSlice( $el, $slices, $navNext, $navPrev, settings );
}
});

// navigation events
$navNext.bind(‘click.vaccordion’, function(e){
slicenav = true;
aux.navigate( 1, $slices, $navNext, $navPrev, settings );
});

$navPrev.bind(‘click.vaccordion’, function(e){
slicenav = true;
aux.navigate( -1, $slices, $navNext, $navPrev, settings );
});

// adds events to the mouse
$el.bind(‘mousewheel.vaccordion’, function(e, delta) {
slicenav = true;
if(delta > 0) {
aux.navigate( -1, $slices, $navNext, $navPrev, settings );
}
else {
aux.navigate( 1, $slices, $navNext, $navPrev, settings );
}
return false;
});

});
}
}
};

$.fn.vaccordion = function(method) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === ‘object’ || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( ‘Method ‘ + method + ‘ does not exist on jQuery.vaccordion’ );
}
};

})(jQuery);

Any way to add a scrollbar to a slice when content is taller than the slice itself?

To David Wathen!

Your version of jquery.vaccordion.js doesn’t work when i try to substitute the original. Could you explain in detail what you did to stop closing the slice when clicking on active elements???