Bootstrap 3 Collapse (da sinistra a destra)

Question

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

C'è un modo per ottenere questo menu a scorrimento da sinistra a destra? Mi sono guardato intorno e non ho visto molto, ma mi stavo chiedendo se qualcuno avesse più intuizioni.

Answer 1

In primo luogo si definisce il seguente CSS dopo tutto 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; 
}  

Avanti, sull'elemento di destinazione (dove si definisce la classe .collapse) è necessario aggiungere la .width classe o .height seconda su quale proprietà si desidera animare.

Infine, è necessario racchiudere il contenuto dell'elemento di destinazione e definirne esplicitamente la larghezza se si anima la larghezza. Questo non è richiesto se si anima l'altezza.

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

Answer 2

Ho trovato anche questo

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

Ecco un modo semplice, ma efficace per ottenere una dissolvenza in/snodata/vetrino dalla parte superiore sinistra dell'elemento di targeting.

La soluzione fornita non utilizza Bootstrap per eseguire l'esempio, ma è possibile utilizzare la soluzione in combinazione con elementi Bootstrap.

Come ad esempio,

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>

Speranza che aiuta!