55

Following is the form with id msform that I want to apply style="display:none" attribute to.

<form id="msform" style="display:none;">
</form>

Also the check should be performed before adding the "style=display:none;" property. That is if it is already set like in above code it should not set again.

But if it's not set then it should.

How should I achieve this? Please help me.

  • *why are you removing the style completely?* (mentioned in comment below). I would have to see the rest of your code/HTML, but changing styles is normally a better option than doing that. If you want to provide more detail you may get a more useful answer :) – iCollect.it Ltd Jan 08 '15 at 17:54

8 Answers8

82

Why not just use $('#msform').hide()? Behind the scene jQuery's hide and show just set display: none or display: block.

hide() will not change the style if already hidden.

based on the comment below, you are removing all style with removeAttr("style"), in which case call hide() immediately after that.

e.g.

$("#msform").removeAttr("style").hide();

The reverse of this is of course show() as in

$("#msform").show();

Or, more interestingly, toggle(), which effective flips between hide() and show() based on the current state.

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
  • I tried to use that but later on I'm having a code to remove style attribute $("#msform").removeAttr("style"); so I want to set style="display:none;". How to do it? –  Jan 08 '15 at 17:44
  • Again... just call `hide()` after the `removeAttr("style")` – iCollect.it Ltd Jan 08 '15 at 17:45
  • is there any way to use .hide() with .before(), Basically i want to add an hidden element -- http://jsfiddle.net/95jeL9xc/2/ – N.K Jan 27 '16 at 07:23
51

As an alternative to hide() mentioned in other answers, you can use css() to set the display value explicitly:

$("#msform").css("display","none")
ruffin
  • 16,507
  • 9
  • 88
  • 138
nicael
  • 18,550
  • 13
  • 57
  • 90
  • 5
    Using 21 characters instead of the 6 of "hide()" would be my only objection (this is for a web page after all) :) – iCollect.it Ltd Jan 08 '15 at 17:56
  • yeah i get that you're trying to provide an alternative, but if you got beat to a much simpler answer, no real reason to most a much longer one. – jmore009 Jan 08 '15 at 17:59
  • @jmore009 Idk, this, in a sense, more literally answers the original question. Is using `hide` and `show` more conventional, and probably a better route? Yes, imo. But if you literally want to change the string attached to `display`, this is howie doit. /shrug – ruffin Jan 19 '21 at 15:34
10
$(document).ready(function(){
var display =  $("#msform").css("display");
    if(display!="none")
    {
        $("#msform").attr("style", "display:none");
    }
});
Suraj Shrestha
  • 1,790
  • 1
  • 25
  • 51
4

You can use the hide and show functions of jquery. Examples

In your case just set $('#msform').hide() or $('#msform').show()

Victor
  • 5,043
  • 3
  • 41
  • 55
2

Based on the comment we are removing one property from style attribute.

Here this was not affect, but when more property are used within the style it helpful.

$('#msform').css('display', '')

After this we use

$("#msform").show();
Srikrushna
  • 4,366
  • 2
  • 39
  • 46
1

You can just use: $("#msform").hide(). This sets the element to display: none

jmore009
  • 12,863
  • 1
  • 19
  • 34
0

You can use the jquery attr() method to achieve the setting of teh attribute and the method removeAttr() to delete the attribute for your element msform As seen in the code

$('#msform').attr('style', 'display:none;');


$('#msform').removeAttr('style');
nbk
  • 45,398
  • 8
  • 30
  • 47
Derly Pacheco
  • 35
  • 2
-1

Please try below code for it :

$('#msform').fadeOut(50);

$('#msform').fadeIn(50);
Kandarp B Patel
  • 1,062
  • 10
  • 28
Derly Pacheco
  • 35
  • 2