hSlides:

		/*
		* hSlides (1.0) // 2008.02.25 // <http://plugins.jquery.com/project/hslides>
		* 
		* REQUIRES jQuery 1.1.2+ <http://jquery.com/>
		* 
		* Copyright (c) 2008 TrafficBroker <http://www.trafficbroker.co.uk>
		* Licensed under GPL and MIT licenses
		* 
		* hSlides is an horizontal accordion navigation, sliding the panels around to reveal one of interest.
		*
		* Sample Configuration:
		* // this is the minimum configuration needed
		* $('#accordion').hSlides({
		* 	totalWidth: 730, 
		* 	totalHeight: 140, 
		* 	minPanelWidth: 87, 
		* 	maxPanelWidth: 425
		* });
		* 
		* Config Options:
		* // Required configuration
		* totalWidth: Total width of the accordion // default: 0
		* totalHeight: Total height of the accordion // default: 0
		* minPanelWidth: Minimum width of the panel (closed) // default: 0
		* maxPanelWidth: Maximum width of the panel (opened) // default: 0
		* // Optional configuration
		* midPanelWidth: Middle width of the panel (centered) // default: 0
		* speed: Speed for the animation // default: 500
		* easing: Easing effect for the animation. Other than 'swing' or 'linear' must be provided by plugin // default: 'swing'
		* sensitivity: Sensitivity threshold (must be 1 or higher) // default: 3
		* interval: Milliseconds for onMouseOver polling interval // default: 100
		* timeout: Milliseconds delay before onMouseOut // default: 300
		* eventHandler: Event to open panels: click or hover. For the hover option requires hoverIntent plugin <http://cherne.net/brian/resources/jquery.hoverIntent.html> // default: 'click'
		* panelSelector: HTML element storing the panels // default: 'li'
		* activeClass: CSS class for the active panel // default: none
		* panelPositioning: Accordion panelPositioning: top -> first panel on the bottom and next on the top, other value -> first panel on the top and next to the bottom // default: 'top'
		* // Callback funtctions. Inside them, we can refer the panel with $(this).
		* onEnter: Funtion raised when the panel is activated. // default: none
		* onLeave: Funtion raised when the panel is deactivated. // default: none
		* 
		* We can override the defaults with:
		* $.fn.hSlides.defaults.easing = 'easeOutCubic';
		* 
		* @param  settings  An object with configuration options
		* @author    Jesus Carrera <jesus.carrera@trafficbroker.co.uk>
		*/

hSlides samples:

	Standard accordion HTML structure:
	<ul class="accordion accordion1">
		<li class="one"><h3>Panel 1</h3><p>Text.</p></li>
		<li class="two"><h3>Panel 2</h3><p>Text.</p></li>
		<li class="three"><h3>Panel 3</h3><p>Text.</p></li>
		<li class="four"><h3>Panel 4</h3><p>Text.</p></li>
		<li class="five"><h3>Panel 5</h3><p>Text.</p></li>
	</ul>
	
	CSS styles:
	
	.accordion, .accordion *{
		margin:0;
		padding:0;
		list-style-type: none;
	}
	.one{
		background:#f00;
	}
	.two{
		background:#0f0;
	}
	.three{
		background:#00f;
	}
	.four{
		background:#ff0;
	}
	.five{
		background:#0ff;
	}
	.accordion li{
		cursor:pointer;
	}
	.accordion .active_click{
		cursor:default;
	}

Sample 1:

	$('.accordion1').hSlides({
		totalWidth: 730, 
		totalHeight: 140, 
		minPanelWidth: 87, 
		maxPanelWidth: 425
	});

Sample 2:

		$('.accordion1').hSlides({
			totalWidth: 730, 
			totalHeight: 140, 
			minPanelWidth: 87, 
			maxPanelWidth: 425,
			activeClass: 'active',
			speed: 1500
		});
		
		HTML:
		<li class="one active">
		
		CSS:
		.active{
			background:#f0f;
		}

Sample 3:

		enterFunction = function(){
			$(this).html('ACTIVE');
		}
		leaveFunction = function(){
			$(this).html('inactive');
		}
		$('.accordion1').hSlides({
			totalWidth: 730, 
			totalHeight: 140, 
			minPanelWidth: 87, 
			maxPanelWidth: 425,
			midPanelWidth: 150,
			easing: 'easeOutBounce', // provided by plugin http://gsgd.co.uk/sandbox/jquery/easing/
			sensitivity: 1,   
			interval: 50,
			timeout: 100,
			onEnter: enterFunction,
			onLeave: leaveFunction
		});

Sample 4:

		$('.accordion1').hSlides({
			totalWidth: 730, 
			totalHeight: 140, 
			minPanelWidth: 87, 
			maxPanelWidth: 425,
			panelPositioning: 'bottom',
			eventHandler: 'hover',
			panelSelector: 'span',
			activeClass: 'active'
		});
		
		HTML:
		<div class="accordion accordion4">
			<span class="one active_click"><h3>Panel 1</h3><p>Text.</p></span>
			<span class="two"><h3>Panel 2</h3>...
		......

Panel 1

Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante.

Panel 2

Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante.

Panel 3

Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante.

Panel 4

Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante.

Panel 5

Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante.