Question

So this is pretty basic stuff but I’m awful with javascript.

I’m working on the following page: http://mockingbirdagency.com/thebox/bettercss/login-1.html

with the following function.

<script type="text/javascript">                                         
$(document).ready(function() {
    $('#button-sign-up').click(function() {
        $(this).css("margin-top","10px");
        $('#details').toggle(500);
        $('#container-bloc-center').css("height", "290px")
    });
});
</script>   

When I click on the button again,I’d like it to go back to its original position, how can I do that ?!

Answer 1

We cannot easily tell you how to reverse changes to CSS if we don’t know the original state of the CSS.

In your CSS if you set up your defaults for margin-top and height of your two elements:

#button-sign-up { margin-top:0px; }
#container-bloc-center { height:25px; }

And also give them an alternate class:

#button-sign-up.active { margin-top:10px; }
#container-bloc-center.active { height:290px; }

Then in your script you could just toggle the active class:

$(document).ready(function() {
    $('#button-sign-up').click(function() {
        $(this).toggleClass("active");
        $('#details').toggle(500);
        $('#container-bloc-center').toggleClass("active");
    });
});