title: Change column width on click in bootstrap 3
body: <p>How to switch the size of one column when there is a click on a sidebar?</p>
  
  <p>Im developing an application with a map in a column and a second column to the right displaying information. There is a sidebar that slides in from the right when activated.</p>
  
  <p>When the sidebar is extended, the main column with the map is col-lg-6 and the column on the right is col-lg-4</p>
  
  <p>Now when the sidebar is closed by clicking on a button, I would like to map column to switch to col-lg-8. Is there a way to do this?</p>
  
  <p>Code for page and sidebar:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="sidebar"&gt;
      &lt;div class="sidebar-wrapper"&gt;
        &lt;div class="panel panel-default" id="features"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;Projects
            &lt;button type="button" class="btn btn-xs btn-default pull-right" id="sidebar-hide-btn"&gt;&lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-xs-8 col-md-8"&gt;
                &lt;input type="text" class="form-control search" placeholder="Filter" /&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-4 col-md-4"&gt;
                &lt;button type="button" class="btn btn-primary pull-right sort" data-sort="feature-name" id="sort-btn"&gt;&lt;i class="fa fa-sort"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;Sort&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="sidebar-table"&gt;
            &lt;table class="table table-hover" id="feature-list"&gt;
              &lt;thead class="hidden"&gt;
                &lt;tr&gt;
                  &lt;th&gt;Icon&lt;/th&gt;
                &lt;tr&gt;
                &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                &lt;tr&gt;
                &lt;tr&gt;
                  &lt;th&gt;Chevron&lt;/th&gt;
                &lt;tr&gt;
              &lt;/thead&gt;
              &lt;tbody class="list"&gt;&lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
      &lt;div class="row" style="margin-left:0px;"&gt;
      &lt;div class="col-xs-12 col-sm-6 col-lg-6" style="padding:0;"&gt;
          &lt;div id="map"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-6 col-lg-4" style="padding-top:0px"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;
                          &lt;i class="fa fa-bar-chart fa-2x"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                      &lt;div class="panel-body" style="text-align:center"&gt;
                          &lt;div id="chart"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
                  &lt;div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;"&gt;
                      &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading"&gt;
                              &lt;i class="fa fa-list fa-2x"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                      &lt;div class="panel-body" style="text-align:left"&gt;
                          &lt;div id="projects"&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;
  &lt;/div&gt;
  </code></pre>
  
  <p>Code for activation of sidebar and menu button:</p>
  
  <pre><code>$(window).resize(function () {
  var h = $(window).height(),
      offsetTop = 50; // Calculate the top offset
  $('#map').css('height', (h - offsetTop));
  }).resize();
  
  $("#list-btn").click(function() {
   $('#sidebar').toggle();
    map.invalidateSize();
    return false;
  });
  
  $("#sidebar-toggle-btn").click(function() {
    $("#sidebar").toggle();
    map.invalidateSize();
    return false;
  });
  
  $("#sidebar-hide-btn").click(function() {
    $('#sidebar').hide();
    map.invalidateSize();
  });
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I have tried using toggleClass and addClass/removeClass but its not working. Here is a jsfiddle to show what happens when the sidebar is hidden.</p>
  
  <p><a href="http://jsfiddle.net/Monduiz/dzo5yg72/" rel="nofollow">http://jsfiddle.net/Monduiz/dzo5yg72/</a></p>