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 jQuery Basics (2014) Creating a Spoiler Revealer Perform: Part 3

It makes more sense to hide the button first and then show the spoiler, instead of the other way around

Just my 2 cents

It doesn't really matter here but on more intensive apps the user might see a short period where the new content that appears is overlaid by the content that is getting hidden.

So a better approach would be to hide first and then show the new content,

Happy coding!

1 Answer

Rossella Rosin
Rossella Rosin
15,734 Points

that's exactly what happens on my not exactly top notch computer, in fact, I do see the spoiler on screen for a few moments, and can actually read it, before the button appears. But in this course they do hide first, the problem is that the page is rendered before javascript can act on it.

I suppose one should rather hide the spoiler with css first, and show it later.

Now that I think of it, all the hiding and showing can be done entirely in css, with slightly different html and css code, there's no actual need of javascript for hiding and showing spoilers. But the purpose of the course is showing us how JQuery works :-)

Yes indeed :)

The visibility of an item should be styled by css and dependent on a state which is induced by JavaScript. (or another programming language that adds the functionality layer to a website on top of the styling layer)

If you're into that stuff, be sure to check out SMACSS (Scalable and Modular Architecture for CSS), it helps you write cleaner and more maintainable CSS. (It's a set of guidelines, not a framework, you can use it as you please).

One of the concepts of SMACSS is to split up your CSS in multiple parts, one of these are state rules, which would do exactly what we are talking about here: adjust the visibility (and other styling) based on a certain state which is induced by JavaScript.

A state is something that augments and overrides all other styles. For example, an accordion section may be in a collapsed or expanded state. A message may be in a success or error state. <cite>—From the SMACSS website</cite>