animation is not working as expected

Question

I am trying an animation on the two divs on button click . Here is the demo i have created js fiddle. what i want is

when the user will click on the button the right div will slide to right (it will hide). and the width of left div will become 100%.

on second time when user will click the right div will visible from right to left slide and the width of left div will 50 %

I am trying this code . my html is

  <div class="col-md-12">
   <div id="tags-left" class="col-md-6">
      div left 
   </div>
</div>
<div id="tag-div" class="col-md-6">
   div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
   <input id="show-tag" type="button" class="save-btn" value="Show Tag">
   <input id="preview" type="button" class="save-btn" value="Preview">
</div>

my js is

$("#show-tag").click(function (e) 
 {
     $( "#tag-div" ).toggle( "slow", function(element) {
        //e.preventDefault();
    if ($('#tag-div').is(":visible") ) {
       $('#tags-left').css('width','50%');
    } else {
      $('#tags-left').css('width','100%');
    }
  });
});

$("#show-tag").click(function (e) 
 {
     $( "#tag-div" ).toggle( "slow", function(element) {
        //e.preventDefault();
    if ($('#tag-div').is(":visible") ) {
       $('#tags-left').css('width','50%');
    } else {
      $('#tags-left').css('width','100%');
    }
  });
});

.col-md-6 {
  width:45%;
    float:left;
    background:red;
    height:200px;
    margin:3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
    <div id="tags-left" class="col-md-6">
        
        div left 
        
</div>
    </div>
    <div id="tag-div" class="col-md-6">
        div right
    </div>
    
   
</div>
 <div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>

Answer 1

This one is simple solution without doing much coding see the fiddle: https://jsfiddle.net/uzar3j4q/7/

JS

var action = 1;

$("#show-tag").click(function () {
     if ( action == 1 ) {
         $("#tag-div" ).animate({'width':'0%',});
         $('#tags-left').animate({'width':'90%'});
         action = 2;
     } else {
         $("#tag-div" ).animate({'width':'45%',});
         $('#tags-left').animate({'width':'45%'});
         action = 1;
     }
});

CSS

.col-md-6 {
  width:45%;
    float:left;
    background:red;
    height:200px;
    margin:3px;
    overflow:hidden; /* This property is added just to hide overflowing content */
}

Answer 2

first of all .. put left and right div in same div and in css

CSS

.col-md-12 {
    white-space: nowrap;
    overflow: hidden;
    height:200px;
}

and you can use animate() method in js

JS

$("#show-tag").click(function (e) 
 {
     $( "#tag-div" ).toggle( "slow", function(element) {
         //$('#tags-left').css('width','0%');
        //e.preventDefault();
    if ($('#tag-div').is(":visible") ) {
        $('#tags-left').animate({'width':'45%'},500);
    } else {
        $('#tags-left').animate({'width':'100%'},500);
    }
  });
});

DEMO HERE

you can just play around that to get the exact action you need

Answer 3

Optimized @Nilesh Mahajan's answer. Found a problem with it when clicking on the button continuously.

// Caching
var $tagsLeft = $('#tags-left'),
    $tagDiv = $('#tag-div');
var tagLeftWidth,
    tagDivWidth;

$("#show-tag").on('click', function () {
    var $this = $(this);
    $this.prop('disabled', true).addClass('disabled'); // Disable the button
    tagLeftWidth = $tagDiv.width() ? '90%' : '45%';
    tagDivWidth = $tagDiv.width() ? '0%' : '45%';

    $tagDiv.animate({
        'width': tagDivWidth
    }, function() {
        $this.prop('disabled', false).removeClass('disabled'); // Enabling button
    });

    $tagsLeft.animate({
        'width': tagLeftWidth
    });
});

Demo: https://jsfiddle.net/tusharj/uzar3j4q/11/