An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
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.
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"
Visible is the default property.
Hide
object.style.visibility = "hidden"
Other values
object.style.visibility = "visible|hidden|collapse|initial|inherit"
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.
Hope this helped and thanks for reading!
Please smash that like button to make me understand that you want the series to continue :)
Subscribe to my newsletter!
Free PDF version of my articles (including this one)
Free and exclusive content for subscribers
Highly customizable inbox
Discounts on my future products
Subscribing to my newsletter you really support my work and you help me build a future. It's free for you, priceless to me.
Other articles
How to change your career and finally become a programmer
DevLorenzo Feb 15 5 min read
Original Link: https://dev.to/devlorenzo/js-hide-and-show-32og
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To