Bootstrap - Sideways Collapse

by Ravindra Athreya

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="">
    <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>

<div class="dummy">
    <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

#demo {
    -webkit-transition: width 2s ease;
    -moz-transition: width 2s ease;
    -o-transition: width 2s ease;
    transition: width 2s ease;
    
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    background: yellow;
    vertical-align: middle;
    line-height: 30px;
    height: 30px;

    width: 0px;
}
#demo.in {
    width: 220px;
    display:inline-block;
}

.dummy{
  display:inline-block;
}

JavaScript

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