JSFiddle - React, Tailwind, and code Playground

by grundez

HTML

<script>
function toggleSidebar(button){
    var toShow = button.parentNode.style.width == "16px";
    dojo.animateProperty({
        node: "sidebar",
        properties: { width: toShow? 160: 16 },
        onEnd: function(){ button.innerHTML = toShow? "&#9668;": "&#9658;"; }
    }).play();
}
</script>
<div class="page">
	<div id="sidebar">
        <div class="toggle" onclick="toggleSidebar(this)">&#9668;</div>
	</div>
</div>

CSS

.page{
    width:100%; height:500px; background:#FFF;
    border: 1px solid #CCC;
}
#sidebar{
    width:160px; height: 100%; background: #FFF;
    border-right: 1px solid #CCC;
}

#sidebar .toggle{
    width: 16px; height: 16px; float:right;
    background: #FFF; color: #CCC;
    cursor: pointer;
}