javascript - Multiple instance of this Accordion on the same page -
i've been trying have multiple instance of accordion on same page. here link fiddle jsfiddle.net/r817l7rv/
the sec accordion same first 1 duplicated different heading text or content. below code. see fiddle external resources dependencies.
(function($) { // cache values var cache = { idx_expanded : -1, // index of current expanded piece sliceh : 0, // default slice's height current : 0, // controls current slider position totalslices : 0 // total number of slices }, aux = { // triggered when click slice. if piece expanded, // close it, otherwise open it.. selectslice : function( $el, $slices, $navnext, $navprev, settings ) { homecoming $.deferred( function( dfd ) { var expanded = $el.data('expanded'), pos = $el.data('position'), itemheight, othersheight, $others = $slices.not( $el ); // if it's opened.. if( expanded ) { $el.data( 'expanded', false ); cache.idx_expanded = -1; // default values of each slices's height itemheight = cache.sliceh; othersheight= cache.sliceh; // hide content div $el.find('.va-content','.za-content').hide(); // command 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 ); // current slice's height itemheight = settings.expandedheight; // height other slices have othersheight= math.ceil( ( settings.accordionh - settings.expandedheight ) / ( settings.visibleslices - 1 ) ); // command 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(); } // animation parameters clicked piece var animparam = { height : itemheight + 'px', opacity : 1, top : ( pos - 1 ) * othersheight + 'px' }; // animate clicked piece , title (<h3>) $el.stop() .animate( animparam, settings.animspeed, settings.animeasing, function() { if( !expanded ) $el.find('.va-content','za-content').fadein( settings.contentanimspeed ); }) .find('.va-title','za-title') .stop() .animate({ lineheight : cache.sliceh + 'px' }, settings.animspeed, settings.animeasing ); // animate others $others.each(function(i){ var $other = $(this), posother= $other.data('position'), t; if( expanded ) t = ( posother - 1 ) * othersheight ; else { if( posother < pos ) t = ( posother - 1 ) * othersheight ; else t = ( ( posother - 2 ) * othersheight ) + settings.expandedheight; } $other.stop() .animate( { top : t + 'px', height : othersheight + 'px', opacity : ( expanded ) ? 1 : settings.animopacity }, settings.animspeed, settings.animeasing, dfd.resolve ) .find('.va-title','za-title') .stop() .animate({ lineheight : othersheight + 'px' }, settings.animspeed, settings.animeasing ) .end() .find('.va-content','za-content') .hide(); }); } ).promise(); }, // triggered when clicking navigation buttons / mouse scrolling navigate : function( dir, $slices, $navnext, $navprev, settings ) { // if animating homecoming if( $slices.is(':animated') ) homecoming false; // move / downwards 1 position // if settings.savepositions false, need close expanded piece before sliding // otherwise slide, , next 1 open automatically var $el; if( cache.idx_expanded != -1 && !settings.savepositions ) { $el = $slices.eq( cache.idx_expanded ); $.when( aux.selectslice( $el, $slices, $navnext, $navprev, settings ) ).done(function(){ settimeout(function() { aux.slide( dir, $slices, $navnext, $navprev, settings ); }, 10); }); } else { aux.slide( dir, $slices, $navnext, $navprev, settings ); } }, slide : function( dir, $slices, $navnext, $navprev, settings ) { // command if can navigate. // command navigation buttons visibility. // navigation behave differently cases have slices closed, // , when 1 opened. depend on settings.savepositions if( cache.idx_expanded === -1 || !settings.savepositions ) { if( dir === 1 && cache.current + settings.visibleslices >= cache.totalslices ) homecoming false; else if( dir === -1 && cache.current === 0 ) homecoming 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 ) homecoming false; else if( dir === -1 && cache.idx_expanded === 0 ) homecoming 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 cannot slide / down, phone call selectslice previous / next piece if( ( dir === 1 && !aux.canslidedown( $slices, settings ) ) || ( dir === -1 && !aux.canslideup( $slices, settings ) ) ) { aux.selectslice( $nextslice, $slices, $navnext, $navprev, settings ); homecoming false; } // if slide down, top , position of each piece 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'); // closed or savepositions false if( !settings.savepositions || cache.idx_expanded === -1 ) $slice.stop().animate({top : t}, settings.animspeed, settings.animeasing); else { var itemheight, othersheight; // if piece 1 should open.. if( === $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','za-content').fadein( settings.contentanimspeed ); }) .find('.va-title','za-title') .stop() .animate({ lineheight : cache.sliceh + 'px' }, settings.animspeed, settings.animeasing ); } // if piece 1 opened, lets close 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','za-title') .stop() .animate({ lineheight : othersheight + 'px' }, settings.animspeed, settings.animeasing ) .end() .find('.va-content','za-content') .hide(); } // 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 ); } } // alter slice's position $slice.data().position += pos_increment; }); }, canslideup : function( $slices, settings ) { var $first = $slices.eq( cache.current ); if( $first.index() !== 0 ) homecoming true; }, canslidedown : function( $slices, settings ) { var $last = $slices.eq( cache.current + settings.visibleslices - 1 ); if( $last.index() !== cache.totalslices - 1 ) homecoming true; } }, methods = { init : function( options ) { if( this.length ) { var settings = { // accordion's width accordionw : 705, // accordion's height accordionh : 610, // number of visible slices visibleslices : 3, // height of opened piece // should not more accordionh expandedheight : 450, // speed when opening / closing piece animspeed : 250, // easing when opening / closing piece animeasing : 'jswing', // opacity value collapsed slices animopacity : 0.2, // time fade in slice's content contentanimspeed: 900, // if set false, before // sliding collapse opened piece savepositions : true }; homecoming this.each(function() { // if options exist, lets merge them our default settings if ( options ) { $.extend( settings, options ); } var $el = $(this), // accordion's slices $slices = $el.find('div.va-slice','div.za-slice'), // navigation buttons $navnext = $el.find('span.va-nav-next','span.za-nav-next'), $navprev = $el.find('span.va-nav-prev','span.za-nav-prev'); // each slice's height cache.sliceh = math.ceil( settings.accordionh / settings.visibleslices ); // total slices cache.totalslices = $slices.length; // command user config parameters if( settings.expandedheight > settings.accordionh ) settings.expandedheight = settings.accordionh; else if( settings.expandedheight <= cache.sliceh ) settings.expandedheight = cache.sliceh + 50; // give minimum // set 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 top & height each slice. // save position of each one. // navigate, first 1 in accordion // have position 1 , lastly settings.visibleslices. // set line-height of title (<h3>) $slices.each(function(i){ var $slice = $(this); $slice.css({ top : * cache.sliceh + 'px', height : cache.sliceh + 'px' }).data( 'position', (i + 1) ); }) .children('.va-title','za-title') .css( 'line-height', cache.sliceh + 'px' ); // click event $slices.bind('click.vaccordion', function(e) { // if have more 1 visible slice. // otherwise able slide. if( settings.visibleslices > 1 ) { var $el = $(this); aux.selectslice( $el, $slices, $navnext, $navprev, settings ); } }); // navigation events $navnext.bind('click.vaccordion', function(e){ aux.navigate( 1, $slices, $navnext, $navprev, settings ); }); $navprev.bind('click.vaccordion', function(e){ aux.navigate( -1, $slices, $navnext, $navprev, settings ); }); // adds events mouse $el.bind('mousewheel.vaccordion', function(e, delta) { if(delta > 0) { aux.navigate( -1, $slices, $navnext, $navprev, settings ); } else { aux.navigate( 1, $slices, $navnext, $navprev, settings ); } homecoming false; }); }); } } }; $.fn.vaccordion = function(method) { if ( methods[method] ) { homecoming methods[method].apply( this, array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { homecoming methods.init.apply( this, arguments ); } else { $.error( 'method ' + method + ' not exist on jquery.vaccordion' ); } }; })(jquery);
id must unique, seek changing id of seconde element:
<div id="va-accordion" class="va-container"> ... </div> <div id="va-accordion2" class="va-container"> //add number 2 on id ... </div> and on jquery function use
(function ($) { $('#va-accordion, #va-accordion2').vaccordion();//add other id }(jquery)); check demo fiddle
now if want improve code can reference classname instead of id's
(function ($) { $('.va-container').vaccordion(); }(jquery)); check demo fiddle
javascript jquery html css
No comments:
Post a Comment