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 jQuery Basics (2014) Introduction to jQuery What is jQuery?

Nicolas Filzi
Nicolas Filzi
18,021 Points

Would it not make more sense to code it this way?

You can add "display: none" in the warning class rule, and then you make it appear. It makes no sense to make it appear, then disappear, and then at last reappear, as shown in this example, does it?

$(".image").on("click", function() {
$(".warning").show("slow");
}); 

4 Answers

Hi Nicolas,

The reason it was done that way is for accessibility. It makes more sense doing it like the video if you consider progressive enhancement and the possibility that js isn't available (for whatever reason).

If js isn't available then the user will still see the image and quote. All content is accessible. If js is available then they get to see the quote animate in. It's an enhancement to the basic experience.

If you first hide the quote with css then you won't be able to see it unless js is working since js is a requirement to make it show.

On the other hand, if you're able to successfully hide it with js then you'll know it's available and you'll be able to successfully show it afterwards.

Nicolas Filzi
Nicolas Filzi
18,021 Points

Thanks for the explanation Jason!

Enrique Munguía
Enrique Munguía
14,311 Points

You are right, when you have full control of the css of the page it would be more sensible to use "display:none". There are occasions though, like using an external css framework, when you have to use the pattern shown of making disappear, then appear or viceversa.

Nicolas Filzi
Nicolas Filzi
18,021 Points

Ok, point taken. Thanks for the explanation Enrique ;)

works in chrome for me