title: Doubts with animate() jquery... open and close column
body: <p>I know very little about jquery, so I come to your advice, I'm trying to animate two columns that I have, this by clicking on a button in any of the two columns, what I need is that by clicking on the button in the column left, it grows and the right column becomes small until it disappears, and when you click on that button again, the sizes return to as it was, the same vice versa, than when you click on the button of the column right, that column grows and the left column goes small until it disappears, and when you click on that button again, the sizes are re-established from both columns, I'm trying to do it with jquery, animate(), using the width attribute ... at the beginning try it with tooggle that, if it allows me to re-establish the size, but the animation always goes to the left, because that is the initial position of the object, I can not give the right column a position float: right because I desacomoda the design, so I've tried to do with width and if I can make the clomnas do the first animation as I want, but I have no idea how to do that by clicking the button again, the sizes are restored, this is the code that I am using for the columns:</p>
  
  <pre><code>&lt;div class="fila"  style="padding-left:3%; padding-right:0%; margin-right:0%; padding-top:3%;"&gt;
              &lt;div class="col2 gift"&gt;
                  &lt;div class="center"&gt;
                      &lt;button class="boton botonp" id="btnslide"&gt;Productos&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="sep"&gt;
                  &lt;img src="imagenes/separador.png" /&gt;
              &lt;/div&gt;
              &lt;div class="col2 servi"&gt;
                  &lt;div class="center"&gt;
                      &lt;button class="boton botonp" id="btnslide2"&gt;Servicios&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
  </code></pre>
  
  <p>This is the jquery with animate ()</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $('#btnslide').click(function() {
              $(".gift").animate({
                  width:"96%"
              },2000);
              $(".servi").animate({
                  width:0
              },2000);
          });
          $('#btnslide2').click(function() {
              $(".servi").animate({
                  width:"96%"
              },2000);
              $(".gift").animate({
                  width:0
              },2000);
          });
      });
  &lt;/script&gt; 
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      $('#btnslide').click(function() {
      $(".gift").animate({
       width:"96%"
      },2000);
      $(".servi").animate({
       width:0
      },2000);
      });
      $('#btnslide2').click(function() {
       $(".servi").animate({
       width:"96%"
      },2000);
       $(".gift").animate({
       width:0
      },2000);
     });
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.col2,.sep{
    float: left;
  }
  .col2{
   width:45%;
   height: 300px;
   border: 1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="fila"  style="padding-left:3%; padding-right:0%; margin-right:0%; padding-top:3%;"&gt;
      &lt;div class="col2 gift"&gt;
       &lt;div class="center"&gt;
        &lt;button class="boton botonp" id="btnslide"&gt;Productos&lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="sep"&gt;
       &lt;img src="imagenes/separador.png" /&gt;
      &lt;/div&gt;
      &lt;div class="col2 servi"&gt;
       &lt;div class="center"&gt;
        &lt;button class="boton botonp" id="btnslide2"&gt;Servicios&lt;/button&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How could I do that by clicking on the buttons again, the sizes are re-established?</p>