title: How to animate when span7 and span5 show hide in bootstrap
body: <p>I have Bootstrap layout with <code>span7</code> and <code>span5</code>(inside a span12).I want to hide span7 and expand span5 as span12 when a button click with smooth animation. Same way,onclick of sam button,both span7 and span5 should display.How to achieve this? The inside content also should be flexible as per the parent span.</p>
  
  <pre><code>&lt;div id="summary-content" class="contentbar-main" style="display:none;"&gt;
                                      &lt;div class="container-fluid"&gt;
                                          &lt;div class="row-fluid"&gt;
                                              &lt;div class="span12"&gt;
                                                  &lt;div class="row-fluid no-space"&gt;
                                                      &lt;div class="span7" id="sidebarid"&gt;
                                                           &lt;div class="myh4"&gt;My Summary&lt;/div&gt;
                                                           &lt;br&gt;
                                                           &lt;div id="summaryTableId"&gt;&lt;/div&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class="span5" id="contentbarid"&gt;
                                                          &lt;div class="row-fluid"&gt;
                                                              &lt;div class="span12"&gt;
                                                                  &lt;div&gt;
                                                                       &lt;span class="summary-left-hide-arrow" id="toggle-button"&gt;&lt;/span&gt;
                                                                       &lt;span class="myh4"&gt;Map&lt;/span&gt;
                                                                   &lt;/div&gt;
                                                                    &lt;br&gt;
                                                                   &lt;div id="#map-canvas" style="width:100%;height:400px;"&gt;&lt;/div&gt;
                                                              &lt;/div&gt;
                                                          &lt;/div&gt;
                                                          &lt;div class="row-fluid"&gt;
                                                              &lt;div class="span12"&gt;
                                                                  &lt;br&gt;
                                                                  &lt;div class="myh4"&gt;Time Sheet&lt;/div&gt;&lt;br&gt;
                                                                  &lt;div id="newTableId"&gt;&lt;/div&gt;
                                                              &lt;/div&gt;
                                                          &lt;/div&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
  </code></pre>