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

CSS jQuery Basics (2014) Creating a Spoiler Revealer Perfect

Diego Villaseñor
Diego Villaseñor
12,615 Points
Posted by Diego Villaseñor
Diego Villaseñor
12,615 Points

Spoiler appear while page is loading

I'm not sure if I did something wrong, but when I load the page, for a fraction of a second the spoilers appear and then they are covered by the buttons, they are not readable, but it doesn't look good either.

Is there a solution for this?

My code

//Prevent spoilers from showing inmediately
//Show spoilers upon user request

//1.Hide spoiler
$(".spoiler span").hide();

//2. Add a button
$(".spoiler").append("<button>Reveal Spoiler!</button>");

//3. When button is pressed
$(".spoiler button").click(function () {
  //show the spoiler
    $(this).prev().show();

  //get rid of the button
    $(this).remove();
});

Thanks in advance!

2 Answers

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Hey,

I also did this stage yesterday. I'm new to JavaScript and jQuery, but I'm sure it's because JS loads after HTML and CSS (since we included our JS file at the end of the page). That means you could hide the spoiler with CSS instead of JS, with a display: none; property. It does the same, but earlier, because CSS loads before JS.

So you don't need this anymore in JS:

$(".spoiler span").hide();

Instead you want this in CSS:

.spoiler span {
  display: none;
}

Voilá!

Jon Brantingham
Jon Brantingham
7,860 Points
Jon Brantingham
Jon Brantingham
7,860 Points

Another pure jQuery solution, is to place all the jQuery within a .ready() function. You can then move the script tags to just before the closing </head> tag. This will load the javascript first, and then when the spoiler loads, it will apply only at that point. I am not sure if this is the best solution, for loading time, but it works for the exercise.

This will add it to a function.

$(".spoiler span").ready(function() {
    //1, hide spoiler
    $(".spoiler span").hide();
    //2, add a button
    $(".spoiler").append("<button>Reveal Spoiler!</button>")
    //3, when button pressed
    $(".spoiler button").click(function() {
        //3.1, show spoiler
        $(this).prev().show();
        //$(".spoiler span").show();
        //3.2, Get rid of button
        $(this).remove();
    });
})

This will put the script before the closing </head> tag.

<!DOCTYPE html>
<html>
<head>
    <title>Star Wars Spoilers</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <img src="img/deathstar.png" />
    <p class="spoiler">
        <!--Spoiler:-->
        <span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
    </p>
    <p class="spoiler">
        <!--Spoiler:-->
        <span>Luke and Leia are siblings. Ew.</span>
    </p>
</body>
</html>