<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.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js