Page 1 of 1

Accordion fix?

Posted: Sat Feb 01, 2014 7:20 pm
by techker
Hey guys i got this friend that has a dealership for used cars..so i did him a web site and his wife really wanted an accordion style view.....




so i got it going it works great but buggy..is there a way to fix when you click it goes back to the top of the page?




here is the link maybe it will be easier to understand when you view it.




http://autosspeedy.ca/TEMP/







code css:

Code: Select all





.wrapper{

width: 95%;

background-color: #FFF;

padding-left: 15px;

height:100%;

}

.wrapperleft{

width: 100%;




background-color: #FFF;







}




.st-accordion{

width:100%;

hight:100%;



margin: 0 auto;

}

.st-accordion ul li{

height: 180px;

border-bottom: 1px solid #c7deef;

border-top:1px solid #fff;

overflow: hidden;

}

.st-accordion ul li:first-child{

border-top: none;

color: #000;

}

.st-accordion ul li > a{

font-family: 'Josefin Slab',Georgia, serif;

text-shadow: 1px 1px 1px #ccc;

font-size: 36px;

display: block;

position: relative;

line-height: 100px;

outline:none;

-webkit-transition: color 0.2s ease-in-out;

-moz-transition: color 0.2s ease-in-out;

-o-transition: color 0.2s ease-in-out;

-ms-transition: color 0.2s ease-in-out;

transition: color 0.2s ease-in-out;

}

.st-accordion ul li > a span{

background: transparent url(../images/down.png) no-repeat center center;

text-indent:-9000px;

width: 26px;

height: 14px;

position: absolute;

top: 50%;

right: -26px;

margin-top: -7px;

opacity:0;

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

font-style:normal;




}

.st-accordion ul li > a:hover{

color: #1693eb;

}

.st-accordion ul li > a:hover span{

opacity:1;

right: 10px;

}

.st-accordion ul li.st-open > a{

color: #1693eb;

}

.st-accordion ul li.st-open > a span{

-webkit-transform:rotate(180deg);

-moz-transform:rotate(180deg);

transform:rotate(180deg);

right:10px;

opacity:1;

}

.st-content{

padding: 5px 0px 30px 0px;

}

.st-content p{

font-size: 16px;

font-family: Georgia, serif;

font-style: italic;

line-height: 28px;

padding: 0px 4px 15px 4px;

color:#333 ;

}

.st-content img{

width:125px;

border-right:1px solid #fff;

border-bottom:1px solid #fff;

}

@media screen and (max-width: 320px){

.st-accordion ul li > a{

font-size:36px;

}

}




JS



Code: Select all


(function( window, $, undefined ) {




/*

* smartresize: debounced resize event for jQuery

*

* latest version and complete README available on Github:

* https://github.com/louisremi/jquery.smartresize.js

*

* Copyright 2011 @louis_remi

* Licensed under the MIT license.

*/




var $event = $.event, resizeTimeout;




$event.special.smartresize = {

setup: function() {

$(this).bind( "resize", $event.special.smartresize.handler );

},

teardown: function() {

$(this).unbind( "resize", $event.special.smartresize.handler );

},

handler: function( event, execAsap ) {

// Save the context

var context = this,

args = arguments;




// set correct event type

event.type = "smartresize";




if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }

resizeTimeout = setTimeout(function() {

jQuery.event.handle.apply( context, args );

}, execAsap === "execAsap"? 0 : 100 );

}

};




$.fn.smartresize = function( fn ) {

return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );

};




$.Accordion = function( options, element ) {




this.$el = $( element );

// list items

this.$items = this.$el.children('ul').children('li');

// total number of items

this.itemsCount = this.$items.length;




// initialize accordion

this._init( options );




};




$.Accordion.defaults = {

// index of opened item. -1 means all are closed by default.

open : -1,

// if set to true, only one item can be opened. Once one item is opened, any other that is opened will be closed first

oneOpenedItem : false,

// speed of the open / close item animation

speed : 600,

// easing of the open / close item animation

easing : 'easeInOutExpo',

// speed of the scroll to action animation

scrollSpeed : 900,

// easing of the scroll to action animation

scrollEasing : 'easeInOutExpo'

};




$.Accordion.prototype = {

_init : function( options ) {




this.options = $.extend( true, {}, $.Accordion.defaults, options );




// validate options

this._validate();




// current is the index of the opened item

this.current = this.options.open;




// hide the contents so we can fade it in afterwards

this.$items.find('div.st-content').hide();




// save original height and top of each item 

this._saveDimValues();




// if we want a default opened item...

if( this.current != -1 )

this._toggleItem( this.$items.eq( this.current ) );




// initialize the events

this._initEvents();




},

_saveDimValues : function() {




this.$items.each( function() {




var $item = $(this);




$item.data({

originalHeight : $item.find('a:first').height(),

offsetTop : $item.offset().top

});




});




},

// validate options

_validate : function() {




// open must be between -1 and total number of items, otherwise we set it to -1

if( this.options.open < -1 || this.options.open > this.itemsCount - 1 )

this.options.open = -1;




},

_initEvents : function() {




var instance = this;




// open / close item

this.$items.find('a:first').bind('click.accordion', function( event ) {




var $item = $(this).parent();




// close any opened item if oneOpenedItem is true

if( instance.options.oneOpenedItem && instance._isOpened() && instance.current!== $item.index() ) {




instance._toggleItem( instance.$items.eq( instance.current ) );




}




// open / close item

instance._toggleItem( $item );




return false;




});




$(window).bind('smartresize.accordion', function( event ) {




// reset orinal item values

instance._saveDimValues();




// reset the content's height of any item that is currently opened

instance.$el.find('li.st-open').each( function() {




var $this = $(this);

$this.css( 'height', $this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) );




});




// scroll to current

if( instance._isOpened() )

instance._scroll();




});




},

// checks if there is any opened item

_isOpened : function() {




return ( this.$el.find('li.st-open').length > 0 );




},

// open / close item

_toggleItem : function( $item ) {




var $content = $item.find('div.st-content');




( $item.hasClass( 'st-open' ) ) 




? ( this.current = -1, $content.stop(true, true).fadeOut( this.options.speed ), $item.removeClass( 'st-open' ).stop().animate({

height : $item.data( 'originalHeight' )

}, this.options.speed, this.options.easing ) )




: ( this.current = $item.index(), $content.stop(true, true).fadeIn( this.options.speed ), $item.addClass( 'st-open' ).stop().animate({

height : $item.data( 'originalHeight' ) + $content.outerHeight( true )

}, this.options.speed, this.options.easing ), this._scroll( this ) )




},

// scrolls to current item or last opened item if current is -1

_scroll : function( instance ) {




var instance = instance || this, current;




( instance.current !== -1 ) ? current = instance.current : current = instance.$el.find('li.st-open:last').index();




$('html, body').stop().animate({

scrollTop : ( instance.options.oneOpenedItem ) ? instance.$items.eq( current ).data( 'offsetTop' ) : instance.$items.eq( current ).offset().top

}, instance.options.scrollSpeed, instance.options.scrollEasing );




}

};




var logError = function( message ) {




if ( this.console ) {




console.error( message );




}




};




$.fn.accordion = function( options ) {




if ( typeof options === 'string' ) {




var args = Array.prototype.slice.call( arguments, 1 );




this.each(function() {




var instance = $.data( this, 'accordion' );




if ( !instance ) {

logError( "cannot call methods on accordion prior to initialization; " +

"attempted to call method '" + options + "'" );

return;

}




if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {

logError( "no such method '" + options + "' for accordion instance" );

return;

}




instance[ options ].apply( instance, args );




});




} 

else {




this.each(function() {

var instance = $.data( this, 'accordion' );

if ( !instance ) {

$.data( this, 'accordion', new $.Accordion( options, this ) );

}

});




}




return this;




};




})( window, jQuery );