JSFiddle - React, Tailwind, and code Playground
HTML
<div></div>
<p>
<input type="button" value="Toggle Width" />
</p>
CSS
div {
width: 0;
height: 100px;
background-color: #00f;
margin-bottom: 15px;
}
JavaScript
var expanded = false;
$('input').click(function() {
var width = $('div').width();
if (expanded) {
$('div').animate({
width: '0'
}, {
queue: false,
duration: (width * 10)
});
expanded = false;
} else {
$('div').animate({
width: '100px'
}, {
queue: false,
duration: (100-width) * 10
});
expanded = true;
}
});