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 trialNicolas Filzi
18,021 PointsWould 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
Jason Anello
Courses Plus Student 94,610 PointsHi 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.
Enrique Munguía
14,311 PointsYou 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
18,021 PointsOk, point taken. Thanks for the explanation Enrique ;)
Thomas Katalenas
11,033 Pointsworks in chrome for me
Nicolas Filzi
18,021 PointsNicolas Filzi
18,021 PointsThanks for the explanation Jason!