0

I'd like to create a row of two columns for the middle page content using Bootstrap 3.x. I tried the off canavas but it did not work as expected for my case based on not answered question here.

Here is my JS Fiddle

I want the left column to be displayed normal on md and above, then hide and display a toggle button on xs and sm devices and the toggle of the columns should apply width animation to show nice column push pull.

HTML

<div class="container-fluid">
<div class="row-fluid">
    <div id="col1" class="col-xs-3">Left Col</div>
    <div id="col2" class="col-xs-9">
        Right Col
        <a id="trig" class="btn btn-inverse">Reflow Me</a>
    </div>

  </div>
</div>

CSS

.row-fluid div {
    height: 200px;
    -webkit-transition: width 0.3s ease, margin 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease;
}

.row-fluid .col-0 {
    width: 0%;

}

#col1 {
    background-color: #A6BFBA;
}

#col2 {
    background-color: #DE4124;
}

#trig {
    margin: 50px;
}

.row-fluid .col-0 + [class*="span"]{
    margin-left: 0;
}

JS

$('#trig').on('click', function () {
    $('#col1').toggleClass('col-0 col-xs-3');
    $('#col2').toggleClass('col-xs-12 col-xs-9');
});
Community
  • 1
  • 1
daliaessam
  • 1,636
  • 2
  • 21
  • 43

1 Answers1

2

Looks like a couple issues here. Firstly you're using legacy code. Anything with "span" is old Bootstrap 2 code. Secondly, you also need to transition padding. Without padding be transitioned, it jumps kind of ugly like. Lastly, you also need to float your col-0 like a normal column.

Updated CSS and demo below:

.row-fluid div {
    height: 200px;
    -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;
}

...

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

http://fiddle.jshell.net/fv2jvbgL/

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • Not hiding the left column text. I added some text to the left column and it just wraps when collapsed, here is a jsfiddle http://fiddle.jshell.net/yz86yhgh/ – daliaessam Jan 07 '15 at 19:06
  • @daliaessam several factors will affect that. Adding `overflow:hidden` will help, but you also have a fixed height of 200. The feasibility of this concept is largely dependent on what you have for content in the left column. http://fiddle.jshell.net/yz86yhgh/1/ – Joseph Marikle Jan 07 '15 at 20:01
  • I created another question on this topic here http://stackoverflow.com/questions/27827888/bootstrap-show-left-column-and-toggle-button-on-small-devices-only – daliaessam Jan 07 '15 at 20:16
  • Excellent solution with bare minimum css and script. – Saqib S May 11 '16 at 11:15