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: -- 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="plementary">

        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.

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/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="plementary">

        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.

• javascript
• twitter-bootstrap-3
• sidebar

• it looks like you are way over plicating it. forget how that or any site does it. simply call .toggle() on the sidebar div. – Timmerz Commented Jan 10, 2014 at 18:16
• @Timmerz: can You develop a little working example on bootply? – Adobe Commented Jan 10, 2014 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 Commented Jan 10, 2014 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 Commented Jan 10, 2014 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 Commented Jan 10, 2014 at 20:15

3 Answers 3

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./bootstrap-template/off-canvas-sidebar http://www.bootstrapzero./bootstrap-template/facebook

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

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

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

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="plementary">

        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.