Bootstrap - Sideways Collapse

by Sree K

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-sm" 
        data-toggle="toggle" data-target="#demo">
    <i class="glyphicon glyphicon-plus"></i>
</button>

<div id="demo" class="bg-primary text-muted">
    <button class="btn btn-default btn-xs" type="button">
        <span class="glyphicon glyphicon-star"></span> Star
    </button>
    <button class="btn btn-default btn-xs" type="button">
        <span class="glyphicon glyphicon-star"></span> Star
    </button>
    <button class="btn btn-default btn-xs" type="button">
        <span class="glyphicon glyphicon-star"></span> Star
    </button>
    <button class="btn btn-default btn-xs" type="button">
        <span class="glyphicon glyphicon-star"></span> Star
    </button>
</div>












<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/24832110/1366033'>Button toggle horizontal with bootstrap</a><br/>
    Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootstrap 3 Skeleton</a><br/>
<div>

CSS

button[data-toggle='toggle'] {
    position: fixed;
    bottom:44px;
}
#demo {
    -webkit-transition: width 0.8s ease;
    -moz-transition: width 0.8s ease;
    -o-transition: width 0.8s ease;
    transition: width 0.8s ease;
    
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    /* background: yellow; */
    vertical-align: middle;
    line-height: 30px;
    height: 30px;
    position: fixed;
    bottom:44px;
    left: 34px;

    width: 0px;
}
#demo.in {
    width: calc(100% - 34px);
}
#demo .btn:first-child {
  margin-left: 4px;
}

JavaScript

$("[data-toggle='toggle']").click(function() {
    var selector = $(this).data("target");
    $(selector).toggleClass('in');
});