Change column width on click in bootstrap 3

Question

How to switch the size of one column when there is a click on a sidebar?

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.

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

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?

Code for page and sidebar:

<div id="container">
  <div id="sidebar">
    <div class="sidebar-wrapper">
      <div class="panel panel-default" id="features">
        <div class="panel-heading">
          <h3 class="panel-title">Projects
          <button type="button" class="btn btn-xs btn-default pull-right" id="sidebar-hide-btn"><i class="fa fa-chevron-left"></i></button></h3>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-8 col-md-8">
              <input type="text" class="form-control search" placeholder="Filter" />
            </div>
            <div class="col-xs-4 col-md-4">
              <button type="button" class="btn btn-primary pull-right sort" data-sort="feature-name" id="sort-btn"><i class="fa fa-sort"></i>&nbsp;&nbsp;Sort</button>
            </div>
          </div>
        </div>
        <div class="sidebar-table">
          <table class="table table-hover" id="feature-list">
            <thead class="hidden">
              <tr>
                <th>Icon</th>
              <tr>
              <tr>
                <th>Name</th>
              <tr>
              <tr>
                <th>Chevron</th>
              <tr>
            </thead>
            <tbody class="list"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

    <div class="row" style="margin-left:0px;">
    <div class="col-xs-12 col-sm-6 col-lg-6" style="padding:0;">
        <div id="map"></div>
    </div>
    <div class="col-xs-6 col-lg-4" style="padding-top:0px">
        <div class="row">
            <div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa fa-bar-chart fa-2x"></i>
                        </div>
                    <div class="panel-body" style="text-align:center">
                        <div id="chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
                <div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-list fa-2x"></i>
                        </div>
                    <div class="panel-body" style="text-align:left">
                        <div id="projects"></div>
                    </div>
                    </div>
                </div>
        </div>
        </div>

    </div>
    </div>
</div>

Code for activation of sidebar and menu button:

$(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();
});

EDIT

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.

http://jsfiddle.net/Monduiz/dzo5yg72/

Possible duplicate of [jquery change class name](http://stackoverflow.com/questions/3452778/jquery-change-class-name) — Drew Gaynor, Oct 19 '15 at 18:38

om_jaipur · Accepted Answer · 2015-10-20T13:35:53.900

3

Try this type of trick:

$("#sidebar-hide-btn").click(function() {
    $('#sidebar').hide();
    $('#mapDiv').removeClass('col-lg-6');
    $('#mapDiv').addClass('col-lg-8');
});

edited Oct 20 '15 at 13:35

answered Oct 19 '15 at 19:23

om_jaipur

2,176
4
30
54

I tried with removeClass/addClass and toggleClass and it doesnt work. The map gets pushed to the left in a narrow strip. I have tried editing the css in the console but I cant get the map div to resize to col-lag-8 after clicking the hide sidebar button. It should work and I dont know why it doesnt. – Monduiz Oct 20 '15 at 12:48
You have a demo link ? – om_jaipur Oct 20 '15 at 13:02
and sorry in my code 1 error, I have missed closing comma here `$('#mapDiv)`. please fix that and try again... – om_jaipur Oct 20 '15 at 13:05
om, its fine I caught that and modified it. I will try to put up an example but for some reason, jsfiddle is giving me problems with bootstrap. – Monduiz Oct 20 '15 at 13:28
You can add bootstrap file in jsfiddle by click on `external library` top on the css box – om_jaipur Oct 20 '15 at 13:35
So, I have made the example as best I could. It doesnt look very good in jsfiddle but the dynamic of the rows and columns for bootstrap is there and you can see what happens when hiding the sidebar. http://jsfiddle.net/Monduiz/dzo5yg72/ – Monduiz Oct 20 '15 at 13:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/92883/discussion-between-om-and-monduiz). – om_jaipur Oct 20 '15 at 16:38
1

please check the link and click on the button: http://design.codeniques.com/quicklegal/test.html – om_jaipur Oct 21 '15 at 05:34
It works!!! The id before the class is what was missing and making the code call to that id! Thank you om! – Monduiz Oct 21 '15 at 17:09

Change column width on click in bootstrap 3

1 Answers1