FAQ: The Box Model - Visibility


#1

This community-built FAQ covers the “Visibility” exercise from the lesson “The Box Model”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Visibility

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!


#2

Elements can be hidden from view with the visibility property. Why would someone choose to hide an element? If I don’t want it to be shown, shouldn’t I use the block comment /* instead?


#3

Much of what we access on the web today is dynamic in nature, that means immediate change in view occurs with every listened for event. Take for instance a menu that is out of sight until the user hovers on a hamburger icon, then pops into view.

Mind, this would not be a use for visibility but display. The latter takes the object completely out of normal flow, the former does not.

visibility applies to a defined object and does not alter its position in normal flow. If it has dimensions, it will take up space, whether visible or hidden. Where this comes into play is when we have a defined layout and we don’t want it jumping around, but stable, with everything maintaining its position.

Say for instance our code displays messages at various intervals or upon given events and outcomes that we don’t want to display for very long. Popping in a message will cause the lines below that point to shift in order to make room for the message to fit in. visibility protects the real estate that message needs to display. When the message is gone, the space remains, but is unoccupied.

function timeOut(el) {
  setTimeout(() => {
    el.textContent = '';
  }, 2000);
};

The above nulls out a string, but also causes the line it was written on to also drop out. Content below jumps up.

function timeOut(el) {
  el.style.visibility = 'visible';
  setTimeout(() => {
    el.style.visibility = 'hidden';
  }, 2000);
};

will hide the textContent but will not give up the line. Mind, we can still collapse if we so desire. In either case, we do not manipulate the textContent. It gets set elsewhere.