hSlides:

	    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';

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,
			panelSelector: 'li.panel'
		});
		
		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.