How to create a link that when clicked is added a CSS property in a div?

Asked

Viewed 723 times

2

I have a div on my site with the class .zopim, how can I do for when the person clicks on the link div classy .zopim receive a margin-bottom:20px ?

Like this: When the person clicks:

<a id="botão-chat" href="#">ABRIR CHAT</a>

Be added to div the margin-bottom.

Similarly, if the person clicks the link again, the margin-bottom that was added.

Link to a similar question: How to create a link that when clicked changes the value of href=" "?

jquery

  • By the very example @bfavaretto posted, you can use $('seu elemento').css(...) or $( 'seu elemento' ).addClass( 'classe-com-margin' ) | $( 'seu elemento' ).removeClass( 'class-without-margin' )

  • I don’t know much jQuery. Make your comment a reply @Papacharlie you are the guy.

  • Papa, are you there? rs

4 answers

7

You can use the method .css() jquery

An example you can use along with the answer to 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>

  • You mean wrong @Silasribeiro in this my question will not need to use $zopim.livechat.window. But thanks for trying to help. I’ll give a +1 by force.

  • 2

    in that case you just need to take out the $Zopim.livechat.window

5


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 the div.zopim. 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: http://jsfiddle.net/Sergio_fiddle/834moahb/

Explanation of the code:

  • $('.zopim a') selects all links within .zopim
  • .on('click', function(){ when this link(s) gets click to run a function
  • $(this).closest('.zopim').toggleClass('aberto'); starting from the clicked element (this) search in parents for an element with class .zopim and toggle makes class. Here could use also .parent() instead of Closest in case the link is descending straight from div. But the Closest is safer not knowing its exact HTML.

If you also want to join text as I saw in your reply you can do so:

$('.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: http://jsfiddle.net/Sergio_fiddle/834moahb/2/

  • Good hint. It is possible to increment to change the element text with $(this).text('ABRIR CHAT') or $(this).text('FECHAR CHAT')?

  • @Papacharlie, that is not part of the question, but I would like to put it this way: http://jsfiddle.net/Sergio_fiddle/834moahb/1/

  • Very cool!!! @Sergio you could also cite another example? See: http://pastebin.com/CttAi3R8 with this code, is added margin-top. Is it possible to make a kind of transition? Similar to what you did with the margin in CSS? Only with jQuery ? Then I can answer as sure ^.^

  • @Alexandrelopes the reason for my answer is that I think it’s best to do this with classes and CSS in CSS, not CSS in javascript. The less jQuery you have on the page the better.

  • But with CSS it’s all wrong and it didn’t work here. Something else only runs in updated browsers. I’ll give you a better answer and I’ll wait for your example with JS even.

  • Is with the Closure that does this?

Show 1 more comment

2

I made a simple example where the control is based on the text of the element, without the control by variables - it’s just one more possibility since you control the text by jQuery.
http://jsfiddle.net/p537yrcp/1/

$('#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' });
    }
});
  • 1

    Cool Papa, good boy....

  • It will go right with another button I’m creating, vlw papa!!!!!! I’m still pretty beginner in jQuery :(

  • jQuery I don’t dominate very well yet, but good that served

0

Reply edited by @Silasribeiro

I don’t know much about jQuery, but I just followed the logic.

I just changed some things, like margin for padding, I switched the ID #a to the Classe .zopim, and removed the $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 I can adapt it and use it for other things.

Note: I’m not going to put this as a better answer, though. I think @Silasribeiro has more right than me. Then that question will be left with no better answer.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.