Twitter Bootstrap Width Auto Issue

Question

I'm working on a mobile version of a website which allows the user to view either the navbar or the content area at any one time. I found and modified a jsfiddle to nearly do what I'd like...

http://jsfiddle.net/SfGAB/2/

Notice the 100% width, if you click the link and then open the nav again, it is much smaller (width: auto). This is due to this part of Twitter Bootstrap's Collapse javascript:

reset: function (size) {
  var dimension = this.dimension()

  this.$element
    .removeClass('collapse')
    [dimension](size || 'auto')
    [0].offsetWidth

  this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')

  return this
}

I assume I can swap out 'auto' for '100%', but that doesn't seem like an ideal solution. Anyone have a suggestion?

Answer 1

So what I ended up doing was not using Bootstrap's code like this...

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target="#menu">

I just used javascript code and css like so:

#nav.in {
    width:0;
}   
#nav.out {
    width:50%;
}
#nav.collapse {
    float:left;
}       
#nav.width {
    position: relative;
    overflow: hidden;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

And then for javascript code...

$('#nav').toggleClass('in').toggleClass('out');