CODEWITHSUNDEEP
javascriptjquerycss
adit
adit

Reputation: 33674

how to change style of a css element using jQuery

I have the following code:

  $('.signup-form-wrapper').css("style", "display: block");
                $('.login-form-wrapper').css("style", "display: none");

Not sure why it doesn't work. The element currently looks like this:

 <div class="signup-form-wrapper form-wrapper" style="display: none;">

I am trying to change this style to display: block, how do I do that?

Upvotes: 0

Views: 285

Answers (4)

Tim B James
Tim B James

Reputation: 20364

You could change your code to either:

$('.signup-form-wrapper').show();

This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially.

Source: http://api.jquery.com/show/

or

$('.signup-form-wrapper').css({ display: 'block' });

.css( properties )

.css( propertyName, value )

Source: http://api.jquery.com/css/#css-propertyName-value

Both will display your element and change the style.

Upvotes: 1

Faisal Sayed
Faisal Sayed

Reputation: 793

.css() itself sets the style of the element.

The function call syntax is:

$(elem).css('style-property','style-value');

change your code to:

$('.signup-form-wrapper').css("display", "block");
$('.login-form-wrapper').css("display", "none");

or for multiple styles for single element pass an object:

$(elem).css({'style-property1':'style-value1','style-property2':'style-value2'});

E.g.

$('.signup-form-wrapper').css({"display": "block", "border":"1px solid red"});

JQuery .css() docs refererence

Upvotes: 0

slash197
slash197

Reputation: 9034

If you are just looking for showing and hiding something there are shorter functions for that such as .hide() or .show()

Upvotes: 0

chandresh_cool
chandresh_cool

Reputation: 11830

Try this

$('.signup-form-wrapper').css("display", "block");
$('.login-form-wrapper').css("display", "none");

Upvotes: 0

Related Questions