Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Caleb Waldner
Caleb Waldner
19,567 Points
Posted by Caleb Waldner
Caleb Waldner
19,567 Points

would the "element.hidden" property be better rather than using the "element.style.display" property?

This question is in response to the Filter Invitees Who Have Not Responded video. I paused the video and tried accomplishing the task before the teacher showed me and I came up with a much different solution. I used the element.hidden property to hide and unhide my LI's, seems much cleaner. But I'm unsure if there was a particular reason Guil used the "element.style.display" method over "element.hidden". Any particular reason to not use the hidden property or is this just a preference thing?

Here is a snapshot of my code that hides the LI's:

filterCheckBox.addEventListener("change", () => {
  const list = ul.children;
  for (i=0;i<list.length;i++) {
    if (! list[i].classList.contains("responded")) {
      if (list[i].hidden === false) {
        list[i].hidden = true;
      } else {
        list[i].hidden = false;
      }
    }
  }
});

1 Answer

Steven Parker
Steven Parker
231,155 Points
Steven Parker
Steven Parker
231,155 Points

The "hidden" attribute keeps an item from being displayed, but it still takes up space on the page, but setting the "display" attribute to "none" renders the display just like if it did not exist at all.

For example:

<p>can you see<span style="visibility: hidden"> this </span>?</p>
<p>can you see<span style="display: none"> this </span>?</p>

And what will be seen on the page:

can you see    ?
can you see?