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 Using append()

Martin Bornman
PLUS
Martin Bornman
Courses Plus Student 12,662 Points
Posted by Martin Bornman
Martin Bornman
Courses Plus Student 12,662 Points

.append button

Help please.I dont know how to do this.

js/app.js 
//Prevent spoilerphobes from seeing spoilers
//Solution: Hide spoilers and reveal them through user interaction

//1, Hide spoiler
$(".spoiler span").hide();
//2, Add a button
$(".spoiler").append('<p>Reveal Spoiler!</p>');
//3, When button pressed
  //3.1, Show spoiler
  //3.2, Get rid of button
index.html 
<!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">
</head>
<body>
    <img src="img/deathstar.png" />
    <p class="spoiler">
        <!--Spoiler:-->
        <span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
    </p>
    <script src="//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>
</body>
</html>

2 Answers

Shawn Ramsey
Shawn Ramsey
27,237 Points
Shawn Ramsey
Shawn Ramsey
27,237 Points 
$(".spoiler").append("<button>Reveal Spoiler!</button>");

Use button instead of paragraphs.

Nico Julian
Nico Julian
23,657 Points
Nico Julian
Nico Julian
23,657 Points

Hi there,

So since the revealing of the spoiler is dependent on the button being clicked, we use the click event to trigger the action. [http://api.jquery.com/click/]

Inside click's parentheses, we can pass in a function which will contain the instructions to show the spoiler and then remove the button appended in step 2.

$(this) implies the button, since it's what the click method is being called on. In order to target the spoiler span hidden in step 1, the prev() method is used. Since the button was appended, the span is what's now previous to it. Show() can then be chained to prev(). [http://api.jquery.com/prev/]

Last, the button can be removed by just calling remove() on $(this).

I hope that helps, I had a hard time with this one too when I first came across it.

// Prevent spoilerphobes from seeing spoilers
// Solution: Hide spoilers and reveal them through user interaction

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

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

//3, When button pressed:
$("button").click( function(){
  $(this).prev().show(); // 3.1, Show spoiler
  $(this).remove(); // 3.2, Get rid of button
} );