CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
user2906420
user2906420

Reputation: 1269

Bootstrap collapse vertical toggle switch

$('#demo').on('hidden', function () {
    $('#divbody').removeClass('span4').addClass('span8');
});

When the button is clicked: the demo div collapses vertically (i.e. width = 0) which works fine. But I want to then increase the divbody div to fill the page i.e. span8. The JS code is there but I want to do it animation like when the demo div collapses.

Upvotes: 0

Views: 4516

Answers (1)

Trevor
Trevor

Reputation: 16116

Hopefully this should help you get an idea, I did not have a whole lot to go off of on your fiddle. But this should get you started.

jQuery

$('#hideBtn').click(function(){
   $('#divbody').toggleClass('span4');
   $('#divbody').toggleClass('span8');
   $(this).parent().toggleClass('span2');
   $(this).parent().toggleClass('span1');
});

CSS

#divbody {
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

HTML

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
        <button role="button" id="hideBtn" class="btn-danger" data-toggle="collapse" data-target="#demo"> Hide </button>    
        <div id="demo" class="collapse in width">
            <div style="width: 400px;">
                <p> This should collapse vertical (by width)</p>
            </div>
        </div>
    </div>
    <div id="divbody" class="span4">
       Table comes here. This is the main body. Span should increase from 4 to 8 when div demo is collapsed. test test test test test test test test test test
    </div>
  </div>
</div>

Example

http://www.bootply.com/90126

Another example with the button below instead of to the side..

http://www.bootply.com/90128

Upvotes: 1

Related Questions