<ul id="accordion">
<li>
<span>Timescales</span>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.</div>
</li>
<li>
<span>Days Purchased</span>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.</div>
</li>
<li>
<span>Connection Details</span>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.</div>
</li>
</ul>#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #7d8d96;
font-family:sans-serif;
}
#accordion li {
float: left;
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;
}
#accordion li span {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display:block;
float:left;
width:170px;
height:50px;
position: relative;
top: 30px;
left: -50px;
font-weight:bold;
cursor:pointer;
}
#accordion li div {
float:left;
height:200px;
margin-left:50px;
width:300px;
margin-top:-40px;
}
#accordion li.active {
width: 450px;
}$(document).ready(function(){
activeItem = $("#accordion li:first");
$(activeItem).addClass('active');
$("#accordion li").click(function(){
$(activeItem).animate({width: "50px"}, {duration:300, queue:false});
$(this).animate({width: "450px"}, {duration:300, queue:false});
activeItem = this;
});
});
External CSS
This Pen doesn't use any external CSS resources.