DEV Community

Cover image for JS: Finally discover how to Hide and Show elements
Lorenzo
Lorenzo

Posted on β€’ Edited on

21 2

JS: Finally discover how to Hide and Show elements

Hello World! New episode of the series - A CSS/JS trick in 5 minutes - Last Article was about a CSS background that can really change your websites.
Today I want to explain you a Javascript trick: How to hide and show elements.

Check this!


We have a special property to change visibility of an element. Set visibility. We just have to call object.style.visibility. The property is supported in all browsers.

Show

object.style.visibility = "visible"
Enter fullscreen mode Exit fullscreen mode

Visible is the default property.

Hide

object.style.visibility = "hidden"
Enter fullscreen mode Exit fullscreen mode

Other values

object.style.visibility = "visible|hidden|collapse|initial|inherit"
Enter fullscreen mode Exit fullscreen mode

image


Parentheses about Display property:

You might get confused about visibility:hidden and display:none.

The visibility property allows the author to show or hide an element. It is similar to the display property. However, the difference is that if you set display:none, it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size. W3school

Display specifies how an element should be displayed, visibility makes an element hidden. Visibility will not affect the layout (so I recommend you to use it most of the time)

We have a lot of different display values, full list on w3school.

Also, I have to add, with "display: none" the element is still present in the DOM, with that if you set a button or a href link to "display: none" is still clickable even if it is not visible.
Thanks to @aspiiire πŸ”₯ for telling me.


Hope this helped and thanks for reading!

Please smash that like button to make me understand that you want the series to continue :)


Other articles

Article No Longer Available

Article No Longer Available

Article No Longer Available


Subscribe to my Newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (8)

Collapse
 
aspiiire profile image
Aspiiire β€’

Cool article, I would add that with "display: none" the element is still present in the DOM, with that I mean that if you set a button or a href link to "display: none" is still clickable even if it is not visible. πŸ™‚

Collapse
 
lorenzoblog profile image
Lorenzo β€’

Thanks! I mentioned you in the article.

Collapse
 
aspiiire profile image
Aspiiire β€’

Thank you so much DevLorenzo πŸ˜€

Collapse
 
mafee6 profile image
Mafee7 β€’

Use

elem.style.display = "none"

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt β€’

I see some people using left:-9999px;.

Collapse
 
lorenzoblog profile image
Lorenzo β€’

And I don't see where the problem is πŸ™ƒ

Collapse
 
sinisimattia profile image
Mattia Sinisi β€’

I love how short and to the point your articles are

Collapse
 
lorenzoblog profile image
Lorenzo β€’ β€’ Edited

Thanks! This series has the rule of never exceeding 20 lines of code. I try to respect it almost always.

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay