JSFiddle - React, Tailwind, and code Playground

by Sergio Crisostomo

HTML

<div class="zopim"><a href="#">Abrir o chat</a>
</div>
<div>Eu estou depois do "zopim"!</div>

CSS

.zopim {
    color: #522;
    background-color: #ccf;
    padding: 20px;
    transition: margin .5s;
}
a {
    color: green;
}
.aberto {
    margin-bottom:20px;
}

JavaScript

$('.zopim a').on('click', function () {
    var zopim = $(this).closest('.zopim');
    var chatAberto = zopim.hasClass('aberto');
    zopim.toggleClass('aberto');
    this.innerHTML = chatAberto ? 'Abrir chat.' : 'Fechar chat';
});