Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery hide element while preserving its space in page layout

Tags:

html

jquery

Is there a way in jQuery where I can hide an element, but not change the DOM when it's hidden? I'm hiding a certain element but when it's hidden, the elements below it move up. I don't want that to happen. I want the space to stay the same, but the element to be shown/hidden at will.

Can I do this?

like image 434
slandau Avatar asked Oct 16 '22 13:10

slandau


People also ask

How would you hide the element while still maintaining the element space?

You can hide an element in CSS using the CSS properties display: none or visibility: hidden. display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.

How do I hide a div but keep the space?

you can wrap another div around the outside of it, and probably tell it a specific height to occupy. that way your inner div can show and hide and fadeOut, etc, and the outer div will hold down the real-estate on the page.

Which property is needed to hide an element without using any space on the page?

The visibility CSS property shows or hides an element without changing the layout of a document.

What does hide () do in jQuery?

The hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show() method.


1 Answers

Instead of hide(), use:

css('visibility','hidden')

hide() sets the display style to none, which completely removes the element from the document flow and causes it to not take up space.

visibility:hidden keeps the space as it is.

like image 305
Dr.Molle Avatar answered Oct 18 '22 01:10

Dr.Molle