JSFiddle - React, Tailwind, and code Playground

by Rohan Kumar

HTML

<div id="popout">
    <div id="toggle">Show</div>
    <br style="clear: both" />
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
</div>

CSS

#popout {
    position: fixed;
    height: 100px;
    width: 75px;
    border: 1px dotted gray;
    background: darkblue;
    color: white;
    top:50px;
    left: -40px;
}
#toggle {
    float: right;
}

JavaScript

var left = -40;
$('#toggle').click(function () {
    left = left == 0 ? -40 : 0;
    html = 'Show';
    if (left == 0) {
        html = 'Close';
    }
    $('#popout ').animate({
        left: left
    }, 'slow', function () {
        $('#toggle ').html(html);
    });
});