A CodePen by Derek P. Collins. Content Slider - On Click - Click a section to grow the content. Uses jQuery to set/remove classes on click. Uses CSS for the animation itself. If you click on an expanded section of content it will reset.

index.html

<div class="slider">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div><!-- .slider -->

script.js

$('.slider').on('click', function( event ) {
  var $target = $(event.target);
  if( $target.hasClass( 'grow' ) ) {
    $(this).find( '.slide' ).removeClass( 'shrink grow' );
  } else {
    $(this).find( '.slide' ).removeClass( 'grow' ).addClass( 'shrink' );
    $target.removeClass( 'shrink' ).addClass( 'grow' );
  }
});

style.scss

@import "compass";
.slider {
  border: 2px solid #222;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 30px auto;
  overflow: hidden;
  width: 541px;
  
  .slide {
    border-left: 2px solid #222;
    height: 200px;
    float: left;
    overflow: hidden;
    -moz-transition: width .4s ease-out;
    -webkit-transition: width .4s ease-out;
    transition: width .4s ease-out;
    width: 106px;
    
    &:first-child {
      border-left: 0;
    }
    &:hover {
      cursor: pointer;
    }
    &.grow {
      width: 310px;
    }
    &.shrink {
      width: 55px;
    }
  }
}