PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

JS: Finally discover how to Hide and Show elements

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.


⚡Giveaway ⚡

We are giving away any course you need on Udemy. Any price any course. Steps to enter the giveaway --> React to this post --> Subscribe to our Newsletter <-- Very important


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"

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 :)


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!

Comments (0)

loading comments