Q:

Resizable Dynamic Bootstrap Columns

I have two columns (one of which can be hidden) and try to resize the second column, when the first is hidden.
<div class="row">
   <div class="col-sm-3 col-lg-2 ms-dialogHidden">
      content1
   </div>
    <div class="col-sm-9 col-lg-10">
      content2
    </div>
</div>

When i hide the first, I'd like to resize the second one like this:
<div class="row">
   <div class="col-sm-3 col-lg-2 ms-dialogHidden">
       content1
   </div>
   <div class="col-sm-12 col-lg-12">
       content2
   </div>
</div>

Can anyone help me? 
Thanks!

A:

Simply use .toggleClass() to swap between the classes, assuming you have a button that shows/hides the left bar:
$('#hideLeft').click(function() {
  $('#left').toggleClass('col-sm-0 col-sm-3');
  $('#right').toggleClass('col-sm-9 col-sm-12');
});

This shows how you can achieve this, and even do it with an animation (I used classes col-xs-* because the size of the fiddle window is smaller: https://jsfiddle.net/DTcHh/8789/

