Resizable Dynamic Bootstrap Columns

Question

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!

MikkolidisMedius · Accepted Answer · 2015-06-11 12:01:02Z

1

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/

answered Jun 11, 2015 at 12:01

MikkolidisMedius

4,8421 gold badge27 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Plumpssack Over a year ago

Thanks for your reply! The problem is that im using it in a masterpage, so that if I open a Popup(which uses the same masterpage) the left column disapears and the Popup Content takes the whole space. That means that i cant use a button to swap between the classes.

MikkolidisMedius Over a year ago

The button is just for demonstration, you can change the classes at any time, when opening the popup for example. This derived example changes the classes only to the left and right divs located below another div with the modal-frame class, leaving the other untouched, the javascript executes at page load: jsfiddle.net/a676s1g0/2

cs04iz1 · Accepted Answer · 2015-06-11 11:46:42Z

I think this should do it:

<div class="row"> <div id="first" class="col-sm-3 col-lg-2 ms-dialogHidden"> content1 </div> <div id="second" class="col-sm-12 col-lg-12"> content2 </div> </div>

and the jquery to handle the html.

if($("#first").hasClass(ms-dialogHidden)){ $("#second").removeClass().end().addClass("col-sm-12 col-lg-12") }

Collectives™ on Stack Overflow

Resizable Dynamic Bootstrap Columns

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related