title: How to improve this animation?
body: <p>I have three divs on the same line. You can check the example here: <a href="http://yoyo.ro/abw" rel="nofollow">http://yoyo.ro/abw</a> just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.</p>
  
  <p>When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth. </p>
  
  <pre><code>function hideTest(){
           $(".instagram").addClass("slideout");
           $(".videotracking").addClass("slideout");
           $(".instagram").animate({left:"150%"},500);
           $(".videotracking").animate({left:"150%"},500);
           }
  function showTest(){
           $(".instagram").animate({left:"33.3%"},500);
           $(".videotracking").animate({left:"66.6%"},500);
           $(".instagram").removeClass("slideout");
           $(".videotracking").removeClass("slideout");
           }
  
       $(".madetomeasure").on('click',function(){
           var testwidth = $(this).find(".vc_btn3-container").width();
           $(this).find(".vc_btn3-container").css("width", testwidth);
  
       if(!$(this).hasClass("openslide")){
           hideTest();
           $(".madetomeasure").addClass("openslide");
           $(this).find(".txtbox").animate({left:0},500);}
  
        else {
              $(this).find(".txtbox").animate({left:"-100%"},500);
              $(".madetomeasure").removeClass("openslide");
              showTest();
               }
  
           });
  </code></pre>
  
  <p>here is the css relevant to the JS</p>
  
  <pre><code>   .txtbox{
  -webkit-transition: all 0.3s ease-out;
          -moz-transition: all 0.3s ease-out;
          -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
          width: 66.5%;
          display:none;
          left:-100%;
          padding:0px 15px;
          float:left;
          position:relative;}
     .instagram, .videotracking{position:static;}
     .instagram {left:33.3%;}
     .videotracking{left:66.5%;}
     .instagram.slideout{position:absolute;}
     .videotracking.slideout{position:absolute;}
     .madetomeasure .button{
       z-index:1;
       height:300px;
       background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
       border: none !important;}
     .madetomeasure.openslide {width:100%;}
     .madetomeasure.openslide .wpb_wrapper {display:flex;}
     .madetomeasure.openslide .txtbox {display:block;}
  </code></pre>
  
  <p>Thank you so much for the patience... :) I really appreciate it</p>