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
David Lacho
20,864 PointsSplit second where spoiler is shown before app.js loaded
Running the preview. When the page loads, there's a split second before app.js is loaded, and so there's a second .hidden() is called on .spoiler span. Therefore, when the page is loaded, you can see the spoiler... Is there a way around this?
3 Answers
Steven Parker
231,269 PointsYou can hide the elements using CSS, which will take effect before the page is loaded.
.spoiler span { display: none; }
After adding this CSS, you can remove the script lines that hide the element initially.
Alan McClenaghan
Full Stack JavaScript Techdegree Graduate 56,501 PointsThis works but then the padding no longer has any effect when the spoiler is revealed.
Rather than use the .show() method, you should instead use .css('display', 'block');
Steven Parker
231,269 PointsNote that I was suggesting you should add this to the CSS, not replace anything already there! No changes to the JavaScript will be needed, but you can optionally remove the code with "hide".
Alan McClenaghan
Full Stack JavaScript Techdegree Graduate 56,501 PointsThe CSS is .spoiler span {
color: #dae1e4;
display: block;
padding: 40px 20px;
}
Surely adding display: none; overwrites the display: block; and stops the padding taking effect. Please explain if I am wrong.
Alan McClenaghan
Full Stack JavaScript Techdegree Graduate 56,501 PointsThe color is fine but the spoiler box is visibly smaller and is only as high as the content. The top and bottom padding has not been applied.
Steven Parker
231,269 PointsI didn't realize the span was in block mode to begin with, so that makes sense. But you could use a div instead of a span which would be block mode by default and then you could still use "show".
Alan McClenaghan
Full Stack JavaScript Techdegree Graduate 56,501 PointsIn the CSS file, change .spoiler span to { display: none; }.
This will prevent the spoiler being revealed but will mean the span element has no padding applied.
Then in the JavaScript, rather than use the .show() method, you should instead use .css('display', 'block') to change the css property value back to block.
Agop Karoghlanian
Courses Plus Student 9,058 PointsIt still isn't working even when I made those changes. There's a split second when the page loads where the spoiler shows before it is hidden.
Evgeny Kasian
5,491 PointsAlso make sure to put all of the functionality wrapped in $(function(){
//code here })
So that jQuery fires only ones DOM is finished being constructed.
Steven Parker
231,269 PointsThat's not really a concern when the script loading is done at the end of the document.
Juan Hurtado
2,243 PointsJuan Hurtado
2,243 PointsOne simply solution is to toggle the hidden attribute on the <span> tag in the html.
For example:
<span hidden>Severus Snape is a good guy!!</span>That way as the page is loading you will see that for that split second just the styling of the spoiler will be shown (the blue background) but not the spoiler itself. Hope that helps.