Bootstrap 3 Collapse (left to right) [duplicate]

Question

This question already has an answer here:

• Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical 7 answers

http://getbootstrap.com/javascript/#collapse

Is there a way to get this menu sliding from left to right? I've looked around and haven't seen much, but I was wondering if anyone had anymore insight.

Answer 1

Here is a simple, but effective way to achieve a fade in/toggle/slide from the upper left of the targeting element.

The provided solution does not use Bootstrap to accomplish the example, but you can use the solution in combination with Bootstrap elements.

Such as,

var main = function() {
 var slide = $('.targetEle');
 var press = $('button');
 
 press.click(function() {
   slide.toggle('slow');            
 });
}

$(document).ready(main);

.targetEle {
  display: none;
  margin-top: 5px;
  border-radius: 5px;
}

nav {
  padding: 5px;
  background-color: red;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="btn btn-primary" type="button">
  Button with target element
</button>

<div class="targetEle">
  <nav>
    <p>Menu Item</p>
    <p>Menu Item</p>
    <p>Menu Item</p>
  </nav>
 </div>

Hope that helps!

Answer 2

I also found this

http://jc-designs.net/blog/2011/07/how-to-build-a-horizontal-jquery-accordion/

HTML

<div id="accordion">
    <div class="panel">
      <div class="pink"></div>
      <div class="panelContent p1"> <strong>Section 1 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </div>
</div>    

CSS

#accordion {
    list-style:none;
    margin:30px 0;
    padding:0;
    height:270px;
    width:980px;
    margin:0 0 0 11px;
    border-top:2px solid #000000;
    border-bottom:2px solid #000000;
    overflow:hidden;
}
#accordion .panel {
    float:left;
    display:block;
    height:270px;
    width:44px;
    overflow:hidden;
    color:#666666;
    text-decoration:none;
    font-size:16px;
    line-height:1.5em
}
#accordion .panel.active {
    width:848px
}
.panelContent {
    padding:15px 15px 15px 55px;
    height:240px;
    width:778px;
}
.pink {
    width:42px;
    height:270px;
    float:left;
    background:url(../images/accordionSprite.png) no-repeat 4px 85px #f980a1;
    border-right:2px solid #ffffff;
    cursor:pointer
}
.last {
    border:none
}

Jquery

$(document).ready(function(){

    activePanel = $("#accordion div.panel:first");
    $(activePanel).addClass('active');

    $("#accordion").delegate('.panel', 'click', function(e){
        if( ! $(this).is('.active') ){
            $(activePanel).animate({width: "44px"}, 300);
            $(this).animate({width: "848px"}, 300);
            $('#accordion .panel').removeClass('active');
            $(this).addClass('active');
            activePanel = this;
         };
    });
});

Answer 3

First you define the following CSS after all Twitter Bootstrap CSS:

.collapse {
  height: auto;
  width: auto;
}

.collapse.height {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

.collapse.width {
  position: relative;
  width: 0;
  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;
}

.collapse.in.width {
  width: auto;
}

.collapse.in.height {
  height: auto;
}    

Next, on the target element (where you define the .collapse class) you need to add the class .width or .height depending on what property you want to animate.

Finally, you must wrap the contents of the target element and explicitly define its width if animating the width. This is not required if animating the height.

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical