title: Jquery: Smooth transiton effect while changing classes in html page
body: <p>I have a HTML page where I have 3 divs. Initally 2 are visible(col1, col2) and one is hidden(col3). On button click, I want to hide the second div, change size of first and make third one visible. I want to do this with a smooth transition effect. The divs are as follows:</p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class='col-md-12'&gt;
              &lt;div class="row"&gt;
                  &lt;div id="col1" class="col-sm-8"&gt;
                      &lt;div class="lead"&gt;Chart title goes here&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="col2" class="col-sm-offset-1 col-sm-3"&gt;
                      &lt;div class="lead"&gt;Second Div&lt;/div&gt;
                      &lt;button id="trig" class="btn btn-contrast"&gt;Reflow 
                       Me&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div id="col3" class="col-sm-8 hidden"&gt;
                      &lt;div class="lead"&gt;Fill form&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The script that I currently have only changes the classes but the transition is very abrupt.</p>
  
  <pre><code>&lt;script&gt;
      $("#trig").click(function(){
          $("#col1").toggleClass("col-sm-offset-1 col-sm-3");
          $("#col2").toggleClass("hidden");
          $("#col3").removeClass("hidden");
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I tried this link: <a href="http://fiddle.jshell.net/274NN/5/" rel="nofollow noreferrer">http://fiddle.jshell.net/274NN/5/</a> but this didn't work out well for me. I am new to CSS and jQuery and don't exactly understand what to do. Kindly help!</p>