Using toggleClass to resize Bootstrap columns

I have a webpage which has two main divs. One for a small 'control panel' on the left (takes up a quarter of the space), and a larger main table on the right (takes up three quarters of space). To accommodate different screen sizes, I've incorporates boostrap columns e.g.                 <div className="control-panel col-lg-3 col-md-3 col-sm-3 col-xs-3" id="control-panel">

This mostly works. If I dynamically resize the browser, this is as expected.

Moving on, I've created a toggle button whose click event hides this control panel div (and is expected to resize the main table from 9 columns to the full 12 columns).

Right now for the resizing of the main table, in the click function i just have:
 $('#theMainTable').toggleClass('col-lg-12 col-lg-9');

Open in new window

                                                           
This will toggle between 9 column width and 12, but this will only work on a large screen that isn't resized.
If I dynamically resize the browser to anything else, this will not work.

My assumption is I need some way to toggle multiple screen combos like:
 $('#theMainTable').toggleClass('[b]{col-lg-12 col-md-12 col-sm-12 col-xs-12}[/b] {col-lg-9 col-md-9 col-sm-9 col-xs-9}');

Open in new window

(although the above seems to only work for small resolutions)


the best i can try is:
		$('#theMainTable').toggleClass('col-lg-12 col-lg-9');
		$('#theMainTable').toggleClass('col-md-12 col-md-9');
		$('#theMainTable').toggleClass('col-sm-12 col-sm-9');
		$('#theMainTable').toggleClass('col-xs-12 col-xs-9');

Open in new window


but this doesnt work dynamically. i.e. it works for any resolution you resize to, so long as you refresh the page first

any help?
Dilen PatAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Don't worry about the md sm and lg styles - just do xs - seeing as they are all the same 12:9 it makes no difference
CSS
<style type="text/css">
.master-panel {
  background: blue; 
  color: white;
  padding: 20px;
}
.control-panel {
  background: red; 
  color: white;
  padding: 20px;
}
</style>

Open in new window

HTML
  <div class="row">
    <div class="col-xs-9 master-panel">
      I am the master
    </div>
    <div class="col-xs-3 control-panel">
      I am the control panel
    </div>
  </div>
  <button class="btn btn-primary">Toggle</button>

Open in new window

jQuery
<script>
$(function() {
  $('button').click(function() {
    $('.control-panel').toggle();
    $('.master-panel').toggleClass('col-xs-9 col-xs-12');
  });
});
</script>

Open in new window

Working sample here
Dilen PatAuthor Commented:
What would need to be done if they're not all 12:9? For example, stretching the browser too much (e.g. over two screens) makes the control panel look too large and bulky so for lg it may need to be reduced to 2 or 1
Julian HansenCommented:
Then we would probably need to look at a solution that adds and removes classes manually rather than using toggle class.
Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

Download eBook
Dilen PatAuthor Commented:
I've seen example code that replaces toggleclass with some sort of add/removeclass. They're usually used in conjunction with if statements. But then surely that would be no different to my previous example? It won't work when dynamically resizing the browser window. It'll only work when you stop resizing the window and then refresh the page

             
  
                $('#theMainTable').toggleClass('col-lg-12 col-lg-9');
		$('#theMainTable').toggleClass('col-md-12 col-md-9');
		$('#theMainTable').toggleClass('col-sm-12 col-sm-9');
		$('#theMainTable').toggleClass('col-xs-12 col-xs-9');

Open in new window

Julian HansenCommented:
That code is only toggling -12 and -9 - in which case my earlier solution solves the problem. But you have stated you want to toggle to different classes on different screens. That is when toggleClass is not going to work.

In other words - if the rules are the same for all screens then you only need the col-xs-12 and col-xs-9 - you don't have to worry about the others.

If you want to bring in col-lg-10 and col-lg-2 as well - that is when you complicate the issue and we have to move to add / remove class.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dilen PatAuthor Commented:
it seems the toggle class originally used was actually working, but a JQuery somewhere else was interfering. Once I commented it out, it worked. Thanks for the help
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Bootstrap

From novice to tech pro — start learning today.