CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Obaid Maroof
Obaid Maroof

Reputation: 1579

hide element without setting the display to none in jquery

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.

Upvotes: 7

Views: 17628

Answers (5)

Tibos
Tibos

Reputation: 27823

The simplest way to fake display:none is by setting the position to absolute (so the element is taken out of flow, no longer influencing the rendering of outside elements) and the visibility to hidden (so it is no longer painted).

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

Upvotes: 4

TzoLy
TzoLy

Reputation: 70

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 */
}

Upvotes: 0

user2587132
user2587132

Reputation: 

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

Upvotes: 0

Anil kumar
Anil kumar

Reputation: 4177

Set the opacity of the element to 0.

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

Upvotes: 3

CodingIntrigue
CodingIntrigue

Reputation: 78525

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);

Upvotes: 13

Related Questions