add nested li, update info

README

@@ -1,3 +1,12 @@
-hSlides is an horizontal accordion navigation, sliding the panels around to reveal one of interest.
+hSlides is a jQuery horizontal accordion, sliding the panels around to reveal one of interest. It's very flexible on how to move the panels.
 
-More info at http://www.frontendmatters.com/projects/jquery-plugins/
+Configuration options:
+- Width an height configuration, including width when the panel is closed, or when no panels are open (centered).
+- Speed and easing of the animation.
+- Event triggering the animation.
+- Sensitivity threshold, interval and timeout to avoid unnecessary open/close.
+- CSS class applied to the active pannel.
+- Panel positioning:  first panel on the bottom and next on the top, or viceversa.
+- Callback functions on enter and on leave.
+
+More info and demo at http://www.frontendmatters.com/projects/jquery-plugins/hslides/

index.html

@@ -4,9 +4,25 @@
 	<title>hSlides jQuery plugin</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<style type="text/css" media="all">
-		.accordion, .accordion *{
+
+		.accordion{
 			margin:0;
 			padding:0;
+
+		}
+		.accordion li {
+		  list-style-type: none;
+		}
+		.accordion ul {
+		  margin-left: 25px;
+	    padding-left: 0;
+		}
+		.accordion ul li {
+
+	    list-style-type: disc;
+	  }
+		li {
+		  list-style-type: none;
 		}
 		.one{
 			background:#f00;
@@ -51,14 +67,16 @@
 				totalHeight: 140, 
 				minPanelWidth: 77, 
 				maxPanelWidth: 425
+
 			});
 			$('.accordion2').hSlides({
 				totalWidth: 305, 
 				totalHeight: 200, 
 				minPanelWidth: 27, 
 				maxPanelWidth: 200,
 				activeClass: 'active',
-				speed: 1500
+				speed: 1500,
+				panelSelector: 'li.panel'
 			});
 			$('.accordion3').hSlides({
 				totalWidth: 730, 
@@ -194,6 +212,7 @@ <h2>Sample 2:</h2>
 			<li><strong>First panel active</strong></li>
 			<li><strong>Change active style</strong></li>
 			<li><strong>Slower</strong></li>
+			<li><strong>With internal list items, so we have a panel class to use as selector and avoid errors</strong></li>
 		</ul>
 		<pre>
 		$('.accordion1').hSlides({
@@ -202,7 +221,8 @@ <h2>Sample 2:</h2>
 			minPanelWidth: 87, 
 			maxPanelWidth: 425,
 			activeClass: 'active',
-			speed: 1500
+			speed: 1500,
+			panelSelector: 'li.panel'
 		});
 
 		HTML:
@@ -214,11 +234,11 @@ <h2>Sample 2:</h2>
 		}
 	</pre>
 	<ul class="accordion accordion2">
-		<li class="one active"><h3>Panel 1</h3><p>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.</p></li>
-		<li class="two"><h3>Panel 2</h3><p>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.</p></li>
-		<li class="three"><h3>Panel 3</h3><p>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.</p></li>
-		<li class="four"><h3>Panel 4</h3><p>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.</p></li>
-		<li class="five"><h3>Panel 5</h3><p>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.</p></li>
+		<li class="one active panel"><h3>Panel 1</h3><p><ul><li>a</li><li>b</li></ul>Donec gravida posuere arcu. </p></li>
+		<li class="two panel"><h3>Panel 2</h3><p><ul><li>a</li><li>b</li></ul>Donec gravida posuere arcu. </p></li>
+		<li class="three panel"><h3>Panel 3</h3><p><ul><li>a</li><li>b</li></ul>Donec gravida posuere arcu. </p></li>
+		<li class="four panel"><h3>Panel 4</h3><p><ul><li>a</li><li>b</li></ul>Donec gravida posuere arcu. </p></li>
+		<li class="five panel"><h3>Panel 5</h3><p><ul><li>a</li><li>b</li></ul>Donec gravida posuere arcu. </p></li>
 	</ul>
 
 		<h2>Sample 3:</h2>

jquery.hslides.js

@@ -1,12 +1,12 @@
 /*
-* hSlides (1.0) // 2008.02.25 // <http://www.frontendmatters.com/projects/jquery-plugins/>
+* hSlides (1.0) // 2008.02.25 // <http://www.frontendmatters.com/projects/jquery-plugins/hslides/>
 * 
 * REQUIRES jQuery 1.2.3+ <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.
+* hSlides is an horizontal accordion navigation, sliding the panels around to reveal one of interest. It's very flexible on how to move the panels.
 *
 * Sample Configuration:
 * // this is the minimum configuration needed
@@ -42,7 +42,7 @@
 * $.fn.hSlides.defaults.easing = 'easeOutCubic';
 * 
 * @param  settings  An object with configuration options
-* @author    Suso Guez (Jesus Carrera Rodriguez) <suso.guez@frontendmatters.com>
+* @author    Jesus Carrera <jesus.carrera@frontendmatters.com>
 */
 (function($) {
 $.fn.hSlides = function(settings) {