Button toggle horizontal with bootstrap

Profile picture for user2513846
user2513846

I'm trying to get a button to expand/collapse horizontally other elements(share buttons) and inline using the bootstrap framework

I'm failing at two things:

  1. The button doesn't expand the other elements inline and after the actual + button
  2. When it collapse back the elements in it breaks the line and stack on top of each other

I prepared a fiddle:

http://jsfiddle.net/g7qCZ/

Here is my html code:

<button type="button" class="btn btn-primary btn-sm" 
        data-toggle="collapse" data-target="#demo">+</button>
<div id="demo" class="collapse in width" style="background-color:yellow;">
    <div style="padding: 0; overflow:hidden;">
        <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>

And my css:

<!-- language: lang-css --> 
#demo.width {
    height: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}
  1. The button doesn't expand the other elements inline and after the actual + button

That's because the 'other elements' are nested inside of a div element. Div is a block level element with the default of display: block. You have to override this to display: inline-block if you would like the div contents to appear on the same line as your plus button.

  1. When it collapse back the elements in it breaks the line and stack on top of each other

Overflowing is the last resort for a browser. It would rather not when there are better alternatives and typically wrapping is a better alternative. So the browser will first try to wrap the elements. Only once it can't anymore will it use utilize overflow: hidden to hide the elements. In order to tell the browser not to wrap, you can use white-space: nowrap;

What to do instead:

Bootstrap collapse is best suited for collapsing vertically. In order to collapse horizontally, you'll have to do a little bit of work. You can use jQuery animate to toggle the width property. However, this will decrement the width in JavaScript which is less performant than straight CSS3 transitions.

Here's another approach. Build a data toggle that just toggles the class in. Then style the control to have zero width by default, and make it full width when in is applied:

<!-- language: lang-html --> 
<button type="button" class="btn btn-primary btn-sm" 
        data-toggle="toggle" data-target="#demo">+</button>
<!-- language: lang-js --> 
$("[data-toggle='toggle']").click(function() {
    var selector = $(this).data("target");
    $(selector).toggleClass('in');
});
<!-- language: lang-css --> 
#demo {
    width: 0px;
}
#demo.in {
    width: 220px;
}

Then you can set up the rest of the styles on your demo div:

<!-- language: lang-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;
}

Here's a working demo in fiddle

screenshot