1.Horizontal Accordion

Effect:

Code:

<script type="text/javascript" src="hslidemenu.js">//hslidemenu js</script>
<script type="text/javascript" src="hslidemenu-plug.js">//plug of hslidemenu</script>
<script type="text/javascript">
var _sliding=function(i){
	var left=parseInt(this._boxListEl[i].style.left);
	if(left>=90 && left<=100) clearInterval(this._containerEl["timer"+this.ID]);
};
HSlideMenu("hslidemenu")
	.callback(_sliding,"sliding")
	.extend(autoSlide)//autoSlide is from hslidemenu-plug.js
	.slideBack()
	.setEvent("mouseover").setIntervalInt(10).setDuration(20).build();
</script>

Html:

<ul id="hslidemenu" class="hslidemenu">
	<li><img src="slidemenu/images/1.gif" alt="" /></li>
	<li><img src="slidemenu/images/2.gif" alt="" /></li>
	<li><img src="slidemenu/images/3.gif" alt="" /></li>
	<li><img src="slidemenu/images/4.gif" alt="" /></li>
</ul>

Intro:

1.There is no javascript lab dependence;

2.OO programming;

3.More optional, custome your own event and effect, be able to make it run faster;

4.Plugable;

5.jQuery style scripting

DOWNLOAD

DOWNLOAD plug

Please click HERE to see the full detail.

2.Horizontal JavaScript Accordion 1kb

Effect:

Code:

<script type="text/javascript">slideMenu.build('sm',200,10,10,1);</script>

Intro:

This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. I had seen a similar looking feature on the mootools homepage and set out the replicate the functionality as a standalone script and as lightweight as possible. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.

Script page:http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/

Some relative Horizontal Accordion Scripts:

Accordion_simple_body.html
Accordion_simple.html

3.jQuery Examples - Horizontal Accordion

Effect:

Code:

$(document).ready(function(){
$("ul li a").hover(function(){			
		$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
		$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
		currentBlock = this;				
		lastBlock = this;			
	});
});

Intro:

If you are using jQuery in your page, then this simple script is good for you.

But tt seems there is something wrong with $.hover() in jQuery(jquery-1.2.6.js),the Firebug says:

handler has no properties [Break on this error] if ( !handler.guid ) jquery-1.2.6.js (line 1834)

Script page: http://designreviver.com/tutorials/jquery-examples-horizontal-accordion