How do I create a link that when clicked adds a CSS property to a div?

The cleanest way to do this is with CSS class.

Set a CSS class, example:

.aberto {
    margin-bottom:20px;
}

Then when the link is clicked you can add this class to div.zopim . In order to add and remove, it is simpler to use .toggleClass ()

I would do so:

$('.zopim a').on('click', function(){
    $(this).closest('.zopim').toggleClass('aberto');
});

Example: link

Explanation of the code:

• $('.zopim a') selects all links within .zopim
• .on('click', function(){ when that link (s) receive click run a function
• $(this).closest('.zopim').toggleClass('aberto'); starting from the element clicked ( this ) looks in the parents for an element with class .zopim and does toggle the class. Here you could also use .parent() instead of closest in case the a is a direct descendant of div. But the closest is more secure not knowing your exact HTML.

If you also want to add text as vi in your answer, you can do this:

$('.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';
});

Example: link

You can use the .css() method of JQuery

An example that you can use along with the answer from the other question would be:

<a id="botao-chat" href="#">ABRIR CHAT</a>
<div id="a">
    <p>texto</p>
</div>

<script>
var aberto = false;
$('#botao-chat').click(function() {
if(aberto) {
    $(this).text('ABRIR CHAT');
    $zopim.livechat.window.hide();
    $('#a').css("margin-top", "0");
} else {
    $(this).text('FECHAR CHAT');
    $zopim.livechat.window.show();
    $('#a').css("margin-top", "50px");
}
aberto = !aberto;
return false;
});
</script>

I made a simple example where the control is based on the text of the element, without the control by variables - is just another possibility since you control the text by jQuery.
link

$('#botao-chat').click(function()
{
    if( $(this).text() === 'ABRIR CHAT' )
    {
        $(this).text( 'FECHAR CHAT' )
        $(this).css({ 'margin': '10px' });
    } else{
        $(this).text( 'ABRIR CHAT' )
        $(this).css({ 'margin': '0px' });
    }
});

Edited response from @SilasRibeiro

I do not know much about jQuery, but I just followed the logic.

  

I just changed some things, like from margin to padding , I changed ID #a to Classe .zopim , and removed $zopim.livechat.window .

Final and functional code:

    // Abrir e Fechar o CHAT
    var aberto = false;
$('#botao-chat').click(function() {
if(aberto) {
    $(this).text('ABRIR CHAT');
    $('div.zopim').css("margin-bottom", "0");
} else {
    $(this).text('FECHAR CHAT');
    $('div.zopim').css("margin-bottom", "50px");
}
aberto = !aberto;
return false;
});

And the cool thing is that I can adapt it and use it in other things.

Note: I will not put this as the best answer, although it is. Well I think @SilasRibeiro has more right than I do. So that question will be left with no better answer.