CODEWITHSUNDEEP
javascripthtmlcss
CharlieAus
CharlieAus

Reputation: 83

Modify CSS element on click

I'm working on the following page: http://mockingbirdagency.com/thebox/bettercss/login-1.html I know very little Javascript so please dumb it down for me.

I would like "Register with your email address" to be centered on the block and to go at the top of it (by deleting margin-top: 30px;) when clicked on (the idea being not to have such a big block).

How can I add this to the JS function ??

Thanks!

Upvotes: 0

Views: 125

Answers (3)

Roman Losev
Roman Losev

Reputation: 1941

Try this one:

$("#hh").click(function(){
    $(this).css("margin-top","0px");
});

Upvotes: -1

definitivedev
definitivedev

Reputation: 81

In your jquery click handler 

$(document).ready(function() {
    $('h1').click(function() {
        $('#details').toggle(500);
    });
});

you need to add 

$(this).css("margin-top","");

the final code:

$(document).ready(function() {
    $('h1').click(function() {
        $(this).css("margin-top","");
        $('#details').toggle(500);
    });
});

Upvotes: 2

Ryan McDonough
Ryan McDonough

Reputation: 10012

You may want to use jquery for this so as a basic guide:

$("#target").click(function() {
  alert("Handler for .click() called.");
});

So when you click the item with an ID of target this would show an alert box saying: "Handler for .click() called."

So now you want to add a style to that item you clicked

$("#target").click(function() {
      $(this).css("margin-top","0");
    });

So, now you hit the item, it runs and adds the CSS of margin-top:0; to 'this' which is the item triggering the event.

Obviously you will need to change #target to the ID of the item you want the event to trigger on, you can also use .target and apply to an item with only a class.

Find out more at http://jquery.com

Upvotes: 2

Related Questions