Question

37

setting visibility vs. hide/show

rated 0 times [ 44] [ 7] / answers: 1 / hits: 27551 / 13 Years ago, tue, january 10, 2012, 12:00:00

What is the difference between element.css('visibility', 'visible') and element.show(). Also, what is the difference between element.css('visibility', 'hidden') and element.hide()?

Update: In addition, what is the most proper way to hide an element and all its elements' subtree?

Update N2: Which is the proper way to know if an element (and its subtree) is visible: element.is(':visible') or element.css('visibility')?

Update N3: Is there a way to hide an element (completely), but it still will reserve the space/area on the browser page? (as far as I've got it - the proper way would be to call hide() but it might lead to the page visual restructuring.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nikokorbinm

Add To Favorites

Follow

Total Points: 744

Total Questions: 126

Total Answers: 104

Location: Jersey

Member since Fri, Oct 1, 2021

3 Years ago

nikokorbinm questions

1 Unrecognized font family 'anticon'

Wed, Sep 22, 21, 00:00, 3 Years ago

1 discord.js v12 User Info Command

Sat, Jan 30, 21, 00:00, 3 Years ago

1 Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. in Index.js

Sun, Oct 11, 20, 00:00, 4 Years ago

1 What is the difference using .js and .jsx as file endings for Reactjs?

Fri, Jul 31, 20, 00:00, 4 Years ago

1 TypeScript generic type for pick function (result object values types)

Mon, Jan 27, 20, 00:00, 4 Years ago

View All

answered 13 Years ago alorafrancisl · Accepted Answer

Visibility will still reserve the space in your Browser.

A hidden element is set to display: none thus all space occupied by this element collapses.
If you only set the element to visibility: hidden the element will just go transparent but the space is occupied as if the element is still there.

.hide() is equal to .css('display', 'none')

.show() is equal to .css('display', 'block') - I'm pretty sure jQuery does some magic here to decide if it's really block that should go in there but it's somewhat equal.

@Update:

Once you hide an element with .hide() (or .css('display', 'none')) all elements down the dom-tree that are children of that element will be hidden too.

@Update 2:

If you are using .hide() and .show() it's .is(':visible')
If you are using the visibility css attribute then .css('visibility')

@Update 3:

That's exactly what .css('visibility', 'hidden') does, it hides the element without the page restructuring. .hide() will completely remove the element.