Horizontal Accordion using the Tabs

HTML

<div  id="accordion">
 <!-- accordion header #1 -->
  <img src="images/streaminge.png" />
 
  <div style="width:200px;">
  <h3 style="padding-bottom:10px;">First</h3>
  <p>Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.</p>
  </div>
  
  <img src="images/flash.png" />
  
  <div>
  <h3 style="padding-bottom:10px;">Second</h3>
 <p>Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat.</p>
  </div>
 <img src="images/streaming.png" />
    
  <div>
  <h3 style="padding-bottom:10px;">Third</h3>
  <p>Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.</p>
  </div> 
  </div>

CSS

#accordion {
	background:#FFFFFF url(../images/bg.png) repeat scroll 0;
	height:80px;
	padding:10px 0 10px 10px;
	width:500px;
	border:1px solid #ddd;
}

#accordion img {
	float:left;
	margin-right:10px;
	cursor:pointer;
	opacity:0.5;
	filter: alpha(opacity=50);
}

#accordion img.current {
	cursor:default;
	opacity:1;
	filter: alpha(opacity=100);
}

#accordion div {
	width:0px;
	float:left;	
	display:none;		
	margin-right:10px;
}

#accordion div h3 {
	color:#444;
	margin:0 0 -10px 0;
	width:190px;
	font-size:18px;	
}
	
#accordion div p {	
	font-size:13px;
	width:190px;
}

JavaScript

$(function() {

$("#accordion").tabs("#accordion div", {
	tabs: 'img', 
	effect: 'horizontal'
});
});

jquery.tools.min.js

Click to Download

Example

Click to DEMO