Change CSS with javascript when clicking

Question

Change CSS with javascript when clicking

Navigation

#1 by (3 votes)
#2 by (3 votes)

4

I have a circle in css and half of it is hidden. When you click on it, I want the hidden part to appear. When I click back, I want him to hide again. I made the following javascript code, the problem is: I click, it appears; clico, hides; I click again and nothing happens. I want it to appear / hide how many times the user clicks.

$(".icone-btn").click(function() {
     $(".btn-contato").css("marginTop", "-170px");
        $(".icone-btn").click(function() {
        $(".btn-contato").css("marginTop", "-230px");
   });
});

javascript html css

asked by anonymous 03.03.2015 / 18:38

2 answers

3

Each time you click, you are creating a new clickener that determines the margin as -230px . Solve it with a single event handler. One of the ways is to toggle the margin values according to the current value:

$(".icone-btn").click(function() {
     var atual = .$(".btn-contato").css("marginTop");
     var nova = atual === "-170px" ? "-230px" : "-170px";
     $(".btn-contato").css("marginTop", nova);
});

03.03.2015 / 18:48

What is the proxy creation in the entity framework? What is and how to use the currentColor attribute in CSS?

score 3 · Accepted Answer

Create a class to handle this.

.margintop230 {
margin-top: -230px !important;
}

Leave the style of your circle already at -170px;

.btn-contato {
margin-top: -170px;
}

In javascript you will "toggle" the class .margintop230 with every click:

$('.icone-btn').click(function(){
     $('.btn-contato').toggleClass('margintop230');
});