0

I have bootstrap row of two columns with the left should be the page specific nav/items that should also be visible always on md and higher devices and should display a toggle button on smaller devices to toggle that left column.

Here is current jsfiddle working code for show and hide the left column manually.

Full code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Examples for bootstrap-slider plugin">
    <meta name="author" content="">

      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
      <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  </head>

  <body>

<style>
.row-fluid div {
    -webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

.row-fluid .col-0 {
    width: 0%;
    float:left;
    overflow:hidden;
}

#col1 {
    background-color: #A6BFBA;
}

#col2 {
    background-color: #DE4124;
}

#trig {
    margin: 50px;
}

.row-fluid .col-0 + [class*="col"]{
    margin-left: 0;
}
</style>

<div class="container-fluid">
    <div class="row-fluid">

        <div id="col1" class="col-xs-3">
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
        </div>

        <div id="col2" class="col-xs-9">
            <a id="trig" class="btn btn-primary">Toggle Nav</a><br/>
            Right Column text here<br/>
            Right Column text here<br/>
            Right Column text here<br/>
        </div>

  </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('#trig').on('click', function () {
        $('#col1').toggleClass('col-0 col-xs-3');
        $('#col2').toggleClass('col-xs-12 col-xs-9');
    });
});
</script>

  </body>
</html>
daliaessam
  • 1,636
  • 2
  • 21
  • 43
  • Something along these lines? http://fiddle.jshell.net/LuLp42pw/3/ – Marcelo Jan 07 '15 at 20:34
  • Excellent. One more issue if you do not mind, when you hide the left column the right column bottom white space is still exist since the left column height is originally taller, can this be fixed? I am try to get the same effect of the left Offcanavas but its problem was hidding the contents as stated in the unanswered question here http://stackoverflow.com/questions/27766900/bootstrap-off-canvas-hide-under-bottom-nav – daliaessam Jan 07 '15 at 20:50

0 Answers0