Toggle

by Bhabani Raju

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class"row">
<div class="abt col-xs-3">
about
</div>
<div class="ser col-xs-3">
services
</div>
<div class="con col-xs-3">
contact
</div>
</div>
<br/>

CSS

.abt,.ser, .con
{  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: all 0.5s;}

.abt
{background-color: red;}

.ser
{background-color: green;}

.con{background-color:yellow;}

JavaScript

$('.abt').click(function(){

$(this).addClass('col-xs-6');
  $('.abt').removeClass('col-xs-3');
    $('.ser').removeClass('col-xs-6');
      $('.ser').addClass('col-xs-3');
       $('.con').removeClass('col-xs-6');
      $('.con').addClass('col-xs-3');
   });
   
   
   $('.ser').click(function(){

$(this).addClass('col-xs-6');
  $('.abt').removeClass('col-xs-6');
  $('.abt').addClass('col-xs-3');
  $('.ser').removeClass('col-xs-3');
    $('.con').addClass('col-xs-3');
  $('.con').removeClass('col-xs-6');
   });
   
     $('.con').click(function(){

$(this).addClass('col-xs-6');
 $('.con').removeClass('col-xs-3');
  $('.abt').removeClass('col-xs-6');
  $('.abt').addClass('col-xs-3');
  $('.ser').removeClass('col-xs-6');
    $('.ser').addClass('col-xs-3');
   });