There are some posts discussing collapsing from left to right and there are some Fiddle examples here. But I would like the collapse to happen from right to left. Is that possible with just the code shown below.
#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;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
Horizontal Collapsible</button><div id="container" style="width:400px;height:70px;"><div id="demo" class="collapse in width" style="background-color:yellow;"><div style="padding: 20px; overflow:hidden; width:200px;">
Here is my content</div></div></div><small>Works in FF 24.0, IE 10.</small><br /><b>Doesn't work in Chrome 30.0.1599.1.1</b><ul><li>Bounces on Show</li><li>Hide has no transition</li></ul>