Methods to hide and reveal HTML elements, which is better?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Methods to hide and reveal HTML elements, which is better?

Post by califdon »

I have sometimes used Javascript to assign an object's .innerHTML to either a null string or something else, and I have sometimes used the object's .style.display to be either "hidden" or "block". Does anyone have guidelines as to why one should be used in various circumstances?
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

I'd use the style to hide/display. And I'd use javascript to hide the element, that way users without javascript enabled will still be able to view all of the content.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

if the contents of the element are constant I'll always use display property. I would use innerHTML only in cases where I need to change it, not to delete it in order to hide something.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post by califdon »

Thanks to both of you. Good points.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Use CSS for sure - it's way faster and more reliable, IIRC.

display: none|block|inline; will remove the element entirely from the layout (block|inline depends on the element type, i.e. Block Elements like Divs or inline elements like Spans)

visibility: hidden|visible will make the element in/visible, but it remains "laid out" - which essentially means there will be a hole where the element used to be.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post by califdon »

Oh, right! Visibility! As you said, that won't disturb surrounding elements. Excellent. Thanks, Kieran!
Post Reply