Toggle sidebar in bootstrap3?

Question

I'm trying to get a togglable sidebar:

No sidebar:

>> | Main text
   | goes here

With sidebar:

H1 << | Main text
H2    | goes here

(here is an example of the behaviour: http://pythonhosted.org/cloud_sptheme -- see the button on sidebar. It's not easy to use its code base, because it's not bootstrap-based)

I started from a working example which uses Bootstrap 2 and jQuery 1.8: jsfiddle, SO question, and tried to make it work on Bootstrap 3. Here's a code (code on bootply):

javascript:

$.asm = {};
$.asm.panels = 1;

function sidebar(panels) {
    $.asm.panels = panels;
    if (panels === 1) {
        $('#content').removeClass('col-md-9');
        $('#content').addClass('col-md-12');
        $('#sidebar1').removeClass('show');
        $('#sidebar1').addClass('hide');
    } else if (panels === 2) {
        $('#content').removeClass('col-md-12');
        $('#content').addClass('col-md-9');
        $('#sidebar1').removeClass('hide');
        $('#sidebar1').addClass('show');
    }
}

$('#toggleSidebar').click(function() {
    if ($.asm.panels === 1) {
        $('#toggleSidebar').addClass('fa-backward');
        $('#toggleSidebar').removeClass('fa-forward');
        return sidebar(2);
    } else {
        $('#toggleSidebar').removeClass('fa-backward');
        $('#toggleSidebar').addClass('fa-forward');
        return sidebar(1);
    }
})

css:

#toggleSidebar {
  position:fixed;
  display:block;
  left:0;
  top:45px;
  color:#779DD7;
  padding:2px 4px;
}

hide {
    display: none;
}

show {
    display: inherit;
}

html:

<div class="container">
  <div class="row">
    <div class="col-md-3 hide" id="sidebar1">
      <div id="sidebar" class="bs-sidebar nav bs-sidenav pre-scrollable" role="complementary">

        Toc goes here.

      </div>
    </div>

    <div class="col-md-12" id="content">

      Main text goes here.

    </div>

  </div>
  <a id="toggleSidebar" href="#toggleSidebar1" class="fa fa-forward"</a>
</div>

Edit:

Off canvas is not what I need: it doesn't conserve the horizonatal space, it shifts the div to the right, and the div gets out of the screen. Chanding col-md-9 to col-md-12 and back -- is the best thing I can think of for a problem at hand. This should be simple javascript, which I'm not good at.

it looks like you are way over complicating it. forget how that or any site does it. simply call `.toggle()` on the sidebar div. — Timmerz, Jan 10 '14 at 18:16
@Timmerz: can You develop a little working example on bootply? — Adobe, Jan 10 '14 at 18:20
you have two div's right? in the sidebar div place the collapse button, in the content div place the expand button. on click of either, call `.toggle` on the sidebar and hide the expand button when sidebar is on...add a little css. simple as that. — Timmerz, Jan 10 '14 at 18:29
@Timmerz: seems to me that it's more or less the same methodology I tried above. Only that You propose using two buttons instead of one. I think the methodology is fine, and anyone experinced in debugging javascript could solve it in a moment. — Adobe, Jan 10 '14 at 19:30
except it's not working for you and you have a huge mess of addClass and removeClass and 1's and 2's. what is that? simplify, my friend. simplify. — Timmerz, Jan 10 '14 at 20:15

score 2 · Answer 1 · answered Jan 10 '14 at 18:29

I think you're looking for a "off-canvas" sidebar. Here are 2 off-canvas Bootstrap examples that slide in from the left..

http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar http://www.bootstrapzero.com/bootstrap-template/facebook

Both example use media queries to detect the browser and place the sidebar accordingly.

score 2 · Answer 2 · answered Jan 10 '14 at 18:46

2

Have a look at http://getbootstrap.com/examples/offcanvas/. It is an offcanvas example made by bootstrap itself.

I also love this article http://jasonweaver.name/lab/offcanvas/.

answered Jan 10 '14 at 18:46

Anton Boritskiy

1,539
3
21
37

score 0 · Accepted Answer · answered Jan 11 '14 at 20:42

Oh I solved it:

js:

$(document).ready(function(){

    $.asm = {};
    $.asm.panels = 2;

    $('#toggleSidebar').click(function(){
        if ($.asm.panels === 1) {
            $('#toggleSidebar span').attr({'class': 'glyphicon glyphicon-backward'});
            $('#content').attr({'class': 'col-md-9'});
            $('#sidebar1').show();
            $.asm.panels = 2;
        } else {
            $('#toggleSidebar span').attr({'class': 'glyphicon glyphicon-forward'});
            $('#content').attr({'class': 'col-md-12'});
            $('#sidebar1').hide();
            $.asm.panels = 1;
        }
    });
});

css:

#toggleSidebar {
  position:fixed;
  display:block;
  left:0;
  top:45px;
  color:#779DD7;
  padding:2px 4px;
}

html:

<div class="container">
  <div class="row">
    <div class="col-md-3" id="sidebar1">
      <div id="sidebar" class="bs-sidebar nav bs-sidenav pre-scrollable" role="complementary">

        Toc goes here.

      </div>
    </div>

    <div class="col-md-9" id="content">

      Main text goes here.

    </div>

  </div>
  <button type="button" id="toggleSidebar" class="btn btn-primary"><span class="glyphicon glyphicon-backward"></span></button>
</div>

Demo on bootply.

Toggle sidebar in bootstrap3?

3 Answers3