title: make wider using jquery
body: <p>I'm trying to creating simple make wider box using div in jquery, they are three different column box (red, blue and brown), each column box are different size using CSS.</p>
  
  <p>What i'm trying to do is when pressing button, it will change column box size to wider with animate by changing css name using jquery. </p>
  
  <p>The problem is that when i pressed button the first column (red) is works fine when make wider in jquery, but is not working the second one (blue) box to make wider animate at the same time with red box. what did i missed and why is not working!</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .col-md-1 {
      background-color: #F00;
      height: 300px;
      width: 100px;
  }
  
  .col-md-2 {
      background-color:#0F0;
      height: 300px;
      width: 200px;
  }
  .col-md-3 {
      background-color: #666;
      height: 300px;
      width: 300px;
  }
  .col-md-4 {
      background-color: #666;
      height: 300px;
      width: 400px;
  }
  .col-md-5 {
      background-color: #666;
      height: 300px;
      width: 500px;
  }
  .col-md-6 {
      background-color: #666;
      height: 300px;
      width: 600px;
  }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $("#buttons").click(function(){
  
         $(".col-md-1").toggleClass('col-md-6', 500);
         $("div").addClass("important");
  
         $(".col-md-2").toggleClass('.col-md-6', 500);
         $("div").addClass("important");
  
      });
  });
      &lt;/script&gt;
  </code></pre>
  
  <p>anyone can help me how that make works all three box to make wider at the same time by pressing button!</p>
  
  <p>many thanks.</p>
  
  <p>AM</p>