hide element without setting the display to none in jquery

Question

I want to fold a section of the form without setting its display to none . If i set the display to none , the validation is bypassed that is why I don't want to set the display to none . I know I can set the visibility to hidden and visible but this solution is not feasible for rendering the view as the space for the folded section stays there. This results in a very odd look of the view with an empty white space with no content on it.

So my question is to hide a section of the html form (without intacting a placeholder for it) without setting its display to none , so that I could still perform the validation.

Some HTML code:

<td style="margin: 5px; border-bottom: 1px solid; display:none; overflow: hidden;" colspan="3">
    <div>...</div>
</td>

The display is initially set to none but once it is unfolded for the first time, I am setting the height to 100% and removing the display style.

Answer 1

You can move it off the screen:

$(elem).css("position", "absolute").css("left", -9999);

Or set it's height to 0:

$(elem).css("height", 0);

Answer 2

虚假display:none的最简单方法display:none是通过将位置设置为绝对（因此元素从流中取出，不再影响外部元素的渲染）和隐藏的可见性（因此不再绘制）。

$(elem).css('visibility', 'hidden').css('position','absolute');

Answer 3

将元素的不透明度设置为0。

$(elem).css("opacity", 0);

Answer 4

$("#ele").css({"height" : 0, "width" : 0, "opacity" : 0});

Answer 5

Hiding an element with jquery...

$('element').addClass('hidden');

and in your CSS just use what ever you find appropriate to make that element "hidden"

.hidden{
  /* whatever you find appropriate */
}