diff --git a/src/gallery-sliding-sidebar/js/gallery-sliding-sidebar.js b/src/gallery-sliding-sidebar/js/gallery-sliding-sidebar.js
index 0d168a8e9f..9ea75e9a0a 100644
--- a/src/gallery-sliding-sidebar/js/gallery-sliding-sidebar.js
+++ b/src/gallery-sliding-sidebar/js/gallery-sliding-sidebar.js
@@ -9,12 +9,7 @@ var Lang = Y.Lang,
 	Anim = Y.Anim,
 	Easing = Y.Easing,
 	Event = Y.Event,
-	isBoolean = Y.Lang.isBoolean,
-	isNumber = Y.Lang.isNumber,
-	contentBox,
-	boundingBox,
-	toggleButton,
-	expanded = false;
+	isNumber = Y.Lang.isNumber;
 
 
 /**
@@ -105,20 +100,6 @@ Y.mix(SlidingSideBar, {
 			validator:isNumber
 		},
 
-		/**
-		 * @attribute toggle
-		 * @description determines if a button is used to toggle the sidbar
-		 * in and out
-		 *
-		 * @default true
-		 * @type Boolean
-		 */
-		'toggle':{
-			key:'toggle',
-			value:true,
-			validator:isBoolean
-		},
-
 		/**
 		* @attribute animation
 		* @description Animation config values, see Y.Animation
@@ -130,9 +111,9 @@ Y.mix(SlidingSideBar, {
 		* </code>
 		* @type Object
 		*/
-		animation: {
+		'animation': {
 			value: {
-				duration: 0.5,
+				duration: 0.4,
 				easing: Easing.easeOut
 			},
 			validator: function( value ){
@@ -152,6 +133,19 @@ Y.mix(SlidingSideBar, {
 		'content':{
 			key:'content',
 			value:''
+		},
+		
+		/**
		 * @attribute position
		 * @description the position you wish to display your sidbar. Valid options are: 'left', 'right', 'top', 'bottom'
		 *
		 * @default left
		 * @type String
		 */
+		'position':{
+			key:'position',
+			value:'left',
+			validator: function( value ){
+				return (value == 'top' || value == 'right' || value == 'bottom' || value == 'left');
+			}
+		},
+		'tabIndex':{
+			key:'tabIndex',
+			value:1
 		}
 	}
 });
@@ -177,14 +171,11 @@ Y.extend(SlidingSideBar, Y.Overlay, {
 	 * @protected
 	 */
 	renderUI:function(){
-		Y.log('renderUI','info','SlidingSideBar');
-		boundingBox = this.get('boundingBox');
-		contentBox = this.get('contentBox');
+		Y.log('renderUI','info','SlidingSideBar');
+		this.baseZIndex = this.get('zIndex');
 
 		this.set('width',this.get('collapsedWidth'));
 		this.set('height',this.get('collapsedHeight'));
-
-		this._toggleButton_create();/* create close button */
 	},
 
 	/**
@@ -196,7 +187,7 @@ Y.extend(SlidingSideBar, Y.Overlay, {
 	bindUI:function(){
 		Y.log('renderUI','info','SlidingSideBar');
 		this.get('contentBox').on('click',this._contentBox_click,this);
-
+		this.after('focusedChange',this._setFocus,this);
 	},
 
 	/**
@@ -217,83 +208,11 @@ Y.extend(SlidingSideBar, Y.Overlay, {
 	 * @protected
 	 */
 	destructor:function(){
-		Y.log('destructor','info','SlidingSideBar');
-		this._toggleButton_destroy();/* destoy the toggle button */
-		this._title_destroy();/* destroy the title */
+		Y.log('destructor','info','SlidingSideBar');
+		Event.purgeElement(this.get('contentBox'),true);
+		this.get('contentBox').remove();
 	},
 
-	/**
-	 * Creates the toggle button
-	 *
-	 * @method _toggleButton_create
-	 * @protected
-	 */
-	_toggleButton_create:function(){
-		Y.log('_toggleButton_create','info','SlidingSideBar');
-		var className = this.getClassName('toggle');
-		contentBox.append('<a href="#" class="'+className+'">&#160;</a>');
-		toggleButton = boundingBox.one('.'+className);
-		toggleButton.on('click',this._toggleButton_click,this);
-		if(this.get('toggle')===false){
-			this._toggleButton_hide();
-		}
-	},
-	/**
-	 * Destroys the toggle button
-	 *
-	 * @method _toggleButton_destroy
-	 * @protected
-	 */
-	_toggleButton_destroy:function(){
-		Y.log('_toggleButton_destroy','info','SlidingSideBar');
-		Event.purgeElement('#'.toggleButton.getAttribute('id'),true);
-		toggleButton.remove();
-	},
-	/**
-	 * Shows the toggle button
-	 *
-	 * @method _toggleButton_show
-	 * @protected
-	 */
-	_toggleButton_show:function(){
-		Y.log('_toggleButton_show','info','SlidingSideBar');
-		toggleButton.removeClass(this.getClassName('hidden'));
-	},
-	/**
-	 * Hides the toggle button
-	 *
-	 * @method _toggleButton_hide
-	 * @protected
-	 */
-	_toggleButton_hide:function(){
-		Y.log('_toggleButton_hide','info','SlidingSideBar');
-		toggleButton.addClass(this.getClassName('hidden'));
-	},
-	/**
-	 * Toggle button click event
-	 *
-	 * @method _toggleButton_click
-	 * @protected
-	 */
-	_toggleButton_click:function(){
-		Y.log('_toggleButton_click','info','SlidingSideBar');
-		this._toggleSidebar();
-		return false;
-	},
-	/**
-	 * Toggle button change event
-	 *
-	 * @method _toggleButton_change
-	 * @protected
-	 */
-	_toggleButton_changed:function(){
-		Y.log('_toggleButton_changed: '+(this.get('toggle')?'true':'false'),'info','SlidingSideBar');
-		if(this.get('toggle')){
-			this._toggleButton_show();
-		}else{
-			this._toggleButton_hide();
-		}
-	},
 
 	/**
 	 * Header Content Click event
@@ -313,8 +232,9 @@ Y.extend(SlidingSideBar, Y.Overlay, {
 	 */
 	_contentBox_click:function(e){
 		Y.log('_contentBox_click '+e.target,'info','SlidingSideBar');
-		if(e.target.hasClass('yui-widget-hd') || e.target.hasClass(this.getClassName('toggle'))){
-			this._toggleSidebar();
+		if(e.target.hasClass('yui-widget-hd')){
+			this._toggleSidebar();
+			var contentBox = this.get('contentBox');
 			if(contentBox.one('.yui-widget-hd')){/* if the head exist */
 				contentBox.one('.yui-widget-hd').on('click',this._headerContent_click,this);
 				Y.detach('click',this._contentBox_click,contentBox);
@@ -330,36 +250,90 @@ Y.extend(SlidingSideBar, Y.Overlay, {
 	 * @protected
 	 */
 	_toggleSidebar:function(){
-		Y.log('_toggleSidebar','info','SlidingSideBar');
-		if(expanded){
-			this._contentSize(this.get('collapsedHeight'),this.get('collapsedWidth'));
-			this._hideContent();
-			expanded = false;
-		}else{
-			this._contentSize(this.get('expandedHeight'),this.get('expandedWidth'));
-			this._showContent();
-			expanded = true;
+		Y.log('_toggleSidebar','info','SlidingSideBar');
+		if(this._isExpanded()){
+			this.collapse();
+		}else{
+			this.expand();
 		}
-	},
+	},
+	
+	/**
+	 * Returns if the side bar is currently expanded
+	 *
+	 * @method _isExpanded
+	 * @returns bool
+	 * @protected
+	 */
+	_isExpanded:function(){
+		return this.get('contentBox').hasClass(this.getClassName('expanded'));
+	},
+	
+	/**
+	 * Expands the sidebar to the open position
+	 *
+	 * @method expand
+	 */
+	expand:function(){
+		this._contentSize(this.get('expandedHeight'),this.get('expandedWidth'));
+		this._showContent();
+		this.get('contentBox').addClass(this.getClassName('expanded'));
+	},
+	
+	/**
+	 * Collapses the sidebar to the closed position
+	 *
+	 * @method collapse
+	 */
+	collapse:function(){
+		this._contentSize(this.get('collapsedHeight'),this.get('collapsedWidth'));
+		this._hideContent();
+		this.get('contentBox').removeClass(this.getClassName('expanded'));
+	},
+
 	/**
 	 * Animation adjustment of the content size
 	 *
 	 * @method _contentSize
 	 * @protected
 	 */
-	_contentSize:function(height,width){
-		Y.log('_contentSize','info','SlidingSideBar');
-		var animSet = this.get('animation'),
-			anim = new Anim({
-				node:boundingBox,
-				duration:animSet.duration,
-				easing:animSet.easing,
-				to:{
-					height:height,
-					width:width
-				}
-			});
-		anim.run();
+	_contentSize:function(h,w){
+		Y.log('_contentSize','info','SlidingSideBar');
+		var animSet,
+			animTo = {
+				'height':h,
+				'width':w
+			};
+
+		switch(this.get('position')){
+			case 'right':
+				if(this._isExpanded()){
+					animTo.left = parseFloat(this.get('boundingBox').getStyle('left')) + (this.get('expandedWidth') - this.get('collapsedWidth'));
+				}else{
+					animTo.left = parseFloat(this.get('boundingBox').getStyle('left')) - (this.get('expandedWidth') - this.get('collapsedWidth'));
+				}
+				break;
+			case 'bottom':
+				if(this._isExpanded()){
+					animTo.top = parseFloat(this.get('boundingBox').getStyle('top')) + (this.get('expandedHeight') - this.get('collapsedHeight'));
+				}else{
+					animTo.top = parseFloat(this.get('boundingBox').getStyle('top')) - (this.get('expandedHeight') - this.get('collapsedHeight'));
+				}
+				break;
+		}
+			
+		
+		animSet = this.get('animation');
+		if(this.sizeAnim){
+			this.sizeAnim.stop();
+		}
+		this.sizeAnim = new Anim({
+			node:this.get('boundingBox'),
+			duration:animSet.duration,
+			easing:animSet.easing,
+			to:animTo
+		});
+		this.sizeAnim.run();
 	},
 
 	/**
@@ -369,21 +343,26 @@ Y.extend(SlidingSideBar, Y.Overlay, {
 	 * @protected
 	 */
 	_showContent:function(){
-		Y.log('_showContent','info','SlidingSideBar');
-		if(contentBox.one('.yui-widget-bd')){
-			var animSet = this.get('animation'),
-				anim = new Anim({
-					node:contentBox.one('.yui-widget-bd'),
-					duration:animSet.duration,
-					easing:animSet.easing,
-					to:{
-						opacity:1
-					}
-				});
-			anim.run();
+		Y.log('_showContent','info','SlidingSideBar');
+		if(this.opacityAnim){
+			this.opacityAnim.stop();
+		}
+		if(this.get('contentBox').one('.yui-widget-bd')){
+			var animSet = this.get('animation'),
+				contentBox = this.get('contentBox');
+			this.opacityAnim = new Anim({
+				node:contentBox.one('.yui-widget-bd'),
+				duration:animSet.duration,
+				easing:animSet.easing,
+				to:{
+					opacity:1
+				}
+			});
+			this.opacityAnim.run();
 			contentBox.one('.yui-widget-bd').setStyle('display','block');
 		}
-	},
+	},
+
 	/**
 	 * Hides the content box
 	 *
@@ -391,30 +370,45 @@ Y.extend(SlidingSideBar, Y.Overlay, {
 	 * @protected
 	 */
 	_hideContent:function(){
-		Y.log('_hideContent','info','SlidingSideBar');
-		if(contentBox.one('.yui-widget-bd')){
-			var animSet = this.get('animation'),
-				anim = new Anim({
-					node:contentBox.one('.yui-widget-bd'),
-					duration:animSet.duration,
-					easing:animSet.easing,
-					to:{
-						opacity:0
-					},
-					on:{
-						end:function(){
-							contentBox.one('.yui-widget-bd').setStyle('display','none');
-						}
+		Y.log('_hideContent','info','SlidingSideBar');
+		if(this.opacityAnim){
+			this.opacityAnim.stop();
+		}
+		if(this.get('contentBox').one('.yui-widget-bd')){
+			var contentBox = this.get('contentBox'),
+				animSet = this.get('animation');
+			this.opacityAnim = new Anim({
+				node:contentBox.one('.yui-widget-bd'),
+				duration:animSet.duration,
+				easing:animSet.easing,
+				to:{
+					opacity:0
+				},
+				on:{
+					end:function(){
+						contentBox.one('.yui-widget-bd').setStyle('display','none');
 					}
-				});
-			anim.run();
+				}
+			});
+			this.opacityAnim.run();
 		}
+	},
+	
+	/**
+	 * Sets the panel to focus by modifying the zIndex
+	 *
+	 * @method _setFocus
+	 * @protected
+	 */
+	_setFocus:function(){
+		Y.log('_setFocus','info','SlidingSideBar');
+		var newZIndex = this.baseZIndex;
+		if(this.get('focused')){
+			newZIndex = newZIndex+3;
+		}
+		this.set('zIndex',newZIndex);
 	}
-	/* @todo Add in code to handle zIndex to properly stack sidebars
-	_uiSetFocused: function(val, src) {
-		alert('_uiSetFocused ');
-	}
-	*/
+	
 });
 
 Y.SlidingSideBar = SlidingSideBar;