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

Posted by Patrick McKinney
Patrick McKinney
13,151 Points

Isn't setting Display: none better than hide()?

Wouldn't it be a better practice to set the display property of .warning to none in the CSS file?

If you refresh the page with F5 with the following code, jQuery('.warning').hide(), the element is displayed before hiding.

It seems it is better to leave out this code and set the element's initial display to none using CSS.

1 Answer

Alec Plummer
Alec Plummer
15,181 Points
Alec Plummer
Alec Plummer
15,181 Points

Good question. If you need to have something hidden when as the DOM renders, always go with the css property display: none; over the hide() method. The reason; when the DOM renders, it goes from top to bottom..we link all of our CSS in our head tag and our scripts right before the closing body tag. So that element will be visible until the DOM gets to your scripts. This is especially important when using $(document).ready(); for the same reason that the hide() method won't fire until the DOM is fully loaded. Hope this helps explain why, good luck!