Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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!