JSFiddle - React, Tailwind, and code Playground

by zbst

HTML

<div id="apobutton1" style="cursor:pointer" class="button_zbst"></div>
<div id="apocontent1">$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.removeItem('apostore1');
$('#apobutton1').html('Открыть чат');
$('#apocontent1').slideUp(300);
} else {
localStorage.setItem('apostore1', 1);
$('#apobutton1').html('Закрыть чат');
$('#apocontent1').slideDown(300);
};
});