jquery 具有XBOX360 blade界面风格的水平方向Accordion。

<ul id="callMe">
  <li>Content 1</li>
  <li>Content 2</li>
  <li>Content 3</li>
</ul>

/* hide container until all is ready */
  .test, .test2,.test3,.test4{
  display: none;
  }
  /*Main Container*/
  .container {
  width:100%;	
  }
  .container ul{
  list-style-type: none;
  margin: 0;
  padding:0;	
  }
  .container li{
  display: inline;
  margin: 0px;
  padding:0px;
  }
  /*Content Container*/
  .contentContainer {
  padding-left: 0px;	
  float: left;
  width:0px;
  height: 310px;	
  overflow:hidden;
  }
  .contentWrapper{	
  }
  .contentInnerWrapper{
  text-align: justify;
  padding: 10px;
  }
  /* Handle*/
  .handle{
  float: left;
  width: 38px;
  height: 310px;
  margin: 1px;
  margin-right: -10px;
  background:  url(../images/blade.png) no-repeat;
  }
  .handleOver{	
  background: url(../images/blade_sel.png) no-repeat;
  }
  .handleSelected{	
  background: url(../images/blade_sel.png) no-repeat;
  }
  

$(document).ready(function() {
  $(".test").hrzAccordion(
  {eventTrigger:"mouseover",
  openOnLoad:"",
  cycle: true
  });
  
  $(".test4").hrzAccordion(
  {eventTrigger: "mouseover",
  openOnLoad   : "2",
  handlePositionArray	: "left,left,right,right,right"
  });
  
  $(".test2").hrzAccordion(
  {handlePosition    : "right",
  openOnLoad     	: 5,
  closeOpenAnimation	: 2
  });
  
  $(".test3").hrzAccordion(
  {containerClass     : "container3",
  listItemClass      : "listItem3",					
  contentWrapper     : "contentWrapper3",
  contentInnerWrapper: "contentInnerWrapper3",
  handleClass        : "handle3",
  handleClassOver    : "handleOver3",
  handleClassSelected: "handleSelected3"
  });
  
  });

   

http://www.open-open.com/ajax/ajax20080311225458.htm