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:
- The button doesn't expand the other elements inline and after the actual + button
- When it collapse back the elements in it breaks the line and stack on top of each other
I prepared a fiddle:
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:
#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;
}