JSFiddle - React, Tailwind, and code Playground

by axl163

HTML

<div>
    <button id="toggleButton">toggle menu</button>
</div>
<div id="container">
    <div id="slideOutMenu">
        <ul>
            <li>menu item one</li>
            <li>menu item two</li>
            <li>menu item three</li>
        </ul>
    </div>
</div>

CSS

#toggleButton {
    float: right;
}
#container {
    width: 200px;
}
#slideOutMenu {
    width: 0%;
    white-space: nowrap;
    background: #ccc;
    overflow:hidden;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}

JavaScript

$('#toggleButton').on('click', function () {
    var $slideMenu = $('#slideOutMenu');    
    if ($slideMenu.width() > 0) {
        $slideMenu.css('width', '0%');
    } else {
        $slideMenu.css('width', '100%');
    }
});