JSFiddle - React, Tailwind, and code Playground

by blparker

HTML

<div id="chat" style="overflow-x: hidden;overflow-y: hidden;">
    <div id="chat-panel">
        <ul>
            <li>Bryan: This here is an example of some text that will be going in teh chat panel.</li>
            <li>Bryan: This here ise of some text that will be going in teh chat panel.</li>
            <li>Bryan: This here ist that will be going in teh chat panel.</li>
            <li>Bryan: This here isof some text that will be going in teh chat panel.</li>
        </ul>
    </div>
    <div id="handle"><a href="#">&gt;</a></div>
</div>

CSS

#chat {
    width: 323px;
    height: 99.8%;
    position: absolute;
    right: 0;
    top: 0;
}
#handle {
    float: right;
    background: #efefef;
    font-weight: bold;
    width: 10px;
    height: 30px;
    border: 1px solid #888;
    border-right: 0;
    position: relative;
    top: 50%;
    line-height: 30px;
    padding: 5px;
}
#handle a {
    text-decoration: none;
    font-weight: bold;
    color: #000;
}
#chat-panel {
    float: right;
    background: #efefef;
    border: 1px solid #888;
    width: 300px;
    height: 100%;
    overflow: hidden;
}
#chat-panel ul {
    margin: 0; padding: 10px;
    float: right;
    width: 280px;
}
#chat-panel ul li {
    list-style-type: none;
    line-height: 20px;
    
}

JavaScript

$(function() {
    
    var chatPanel = $("#chat-panel"),
        chat = $("#chat");
    
    $("#handle a").click(function(ev) {    
        
        chatPanel.animate({
            width: 'toggle'
        }, 700, 'swing', function() {            
            if(chatPanel.is(":visible")) {
                //$("#res").append("TRUE");
                $("#handle a", chat).text(">");
            }
            else {
                //$("#res").append("FALSE");
                //chatPanel.show();
                $("#handle a", chat).text("<");
            }
        });
        
    });
    
});