JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<div id="apobutton1" style="cursor:pointer" class="button_zbst"></div>
<div id="apocontent1" style="display:none">$CHAT_BOX$</div>

CSS

.button_zbst {
    border-top: 1px solid #6ca8d9;
    background: #65a9d7;
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
    background: -webkit-linear-gradient(top, #2679bd, #0b5c9e);
    background: -moz-linear-gradient(top, #3e779d, #65a9d7);
    background: -ms-linear-gradient(top, #3e779d, #65a9d7);
    background: -o-linear-gradient(top, #3e779d, #65a9d7);
    padding: 7px 14px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-family: Helvetica, Arial, Sans-Serif;
    text-decoration: none;
    vertical-align: middle;
}
.button:hover {
    border-top-color: #4f7b9e;
    background: #06487d;
}
.button:active {
    border-top-color: #1b435e;
    background: #1b435e;
}

JavaScript

if (!localStorage.getItem('apostore1')) {
    $('#apobutton1').html('Закрыть чат');
    $('#apocontent1').slideDown(0);
} else {
    $('#apobutton1').html('Открыть чат');
};

$('#apobutton1').click(function () {
    if (!localStorage.getItem('apostore1')) {
        localStorage.setItem('apostore1',1);
        $('#apobutton1').html('Открыть чат');
        $('#apocontent1').slideUp(300);
    } else {
        localStorage.removeItem('apostore1');
        $('#apobutton1').html('Закрыть чат');
        $('#apocontent1').slideDown(300);
    };
});