<div class="horizontal-accordion">
  <ul>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>
  </ul>
</div>

.horizontal-accordion {
  width: 100%;
  padding: 100px 0;
  ul {
    width: 800px;
    height: 100px;
    text-align: center;
    font-size: 0;
    margin: 0 auto;
    li {
      width: 150px;
      height: 100%;
      display: inline-block;
      font-size: 12px;
      line-height: 100px;
      cursor: pointer;
      transition: width 0.5s;
      &:first-of-type {
        background-color: #ff7400;
      }
      &:nth-of-type(2) {
        background-color: #ffaa00;
      }
      &:nth-of-type(3) {
        background-color: #1240ab;
      }
      &:nth-of-type(4) {
        background-color: #009999;
      }
      
      &.js-active-accordion {
        width: 600px;
      }
      
      a {
        display: block;
      }
    }
  }
}

$('.horizontal-accordion ul li').hover(function(){
  var self = $(this);
  self.addClass('js-active-accordion');
  $('.horizontal-accordion ul li').not(self).css('width','0');
},
function() {
  $('.horizontal-accordion ul li').removeClass('js-active-accordion').removeAttr('style');
});