JSFiddle - React, Tailwind, and code Playground
HTML
<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>
CSS
#demo {
display: inline-block;
white-space: nowrap;
}
.collapse {
display: none;
visibility: hidden;
}
.collapse.in {
display: block;
visibility: visible;
}
tr.collapse.in {
display: table-row;
}
tbody.collapse.in {
display: table-row-group;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.collapsing.width {
-webkit-transition-property: width, visibility;
transition-property: width, visibility;
width: 0;
height: auto;
}
JavaScript
/* ========================================================================
* Bootstrap: transition.js v3.3.1
* http://getbootstrap.com/javascript/#transitions
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false
var $el = this
$(this).one('bsTransitionEnd', function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
$(function () {
$.support.transition = transitionEnd()
if (!$.support.transition) return
$.event.special.bsTransitionEnd = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function (e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
}
})
}(jQuery);
/* ========================================================================
* Bootstrap: collapse.js v3.3.1
* http://getbootstrap.com/javascript/#collapse
*...