Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML jQuery Basics (2014) Creating a Spoiler Revealer Perfect

prev() does not make sense

Why are you using previous? In the example on the jQuery API, the elements hidden or revealed were adjacent in the DOM, but there is no "button" in the DOM, 'button" is added in the app.js file.

It is totally confusing to be selected adjacent elements which aren't adjacent in the html as far as I can see. This, Prev, Next, are very confusing. I hate this (i.e. (this)) - can you add some videos on using (this) it is confusing.

I sill don't get how the span and the button are adjacent in a way that is selected accurately by using prev(); - do you mean that they are visually adjacent because the button is hiding the span or that they are adjacent in the html - if the latter, than how can anyone know this since "button" does not exist in the index.html file/

6 Answers

Based on your later question I'm not sure if you still want these questions answered but I'll try.

Here's the code from this video:

//1, Hide spoiler
$(".spoiler span").hide();
//2, Add a button
$(".spoiler").append("<button>Reveal Spoiler!</button>");
//3, When button pressed
$("button").click(function(){
  //3.1, Show spoiler next to the button clicked
  $(this).prev().show();
  //3.2, Get rid of button
  $(this).remove();
});

Now if you're viewing this page in your browser and you right click to view the page source then all you will see is the original html source file. You will not see the buttons. However, if you view the html using your browser's developer tools you will see the following html before any user interaction:

<p class="spoiler">
    <!--Spoiler:-->
    <span style="display: none;">Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
    <button>Reveal Spoiler!</button>
</p>

A couple of things to note. When the first part of the script is executed, the .hide() method on the span's, jQuery adds an inline style to the span's setting display: none. Which hides them and removes them from the document flow.

The second thing is that the button element is definitely there. The second part of the code is dynamically adding these buttons in after the page loads So the moment that second code statement finishes executing the button's now exist in the html and they come right after the span's because the .append() method was used.

So hopefully it makes sense now how prev() was used and why it was able to work. The span is the previous sibling to the button The way you know this then is by either examining the js files or inspecting the html in your browsers dev tools. You can not know it by looking at the html source.

This is what the html looks like after I click on the first button:

<p class="spoiler">
    <span style="display: inline;">Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
</p>

Notice the button is now gone because of .remove() and the display of the span has been set back to inline so we can see it again. This is what the .show() method did.

The use of $(this)

When a button is clicked on, that click handler is going to be called. We need to know which button was clicked on so we can show the correct span and also remove the correct button. $(this) is a reference to the button that was clicked on.

Inside the click handler you can't do something like this: $('button').remove(); because that will remove all the buttons on the page. $(this).remove(); will only remove the button that had received the click.

Let me know if anything is still unclear.

Hey Jason, Answers like these make me feel like every dime I paid for using this site is worthwhile =)

Thank you!

My Answer is simple...

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

//1, Hide spoiler

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

//2, Add a button

this my Answer / $(".spoiler").append("<button>Reveal Spoiler!</button>");

//3, When button pressed //3.1, Show spoiler //3.2, Get rid of button

Jason Replogle
Jason Replogle
6,991 Points

I am so confused...even when watching the videos and trying all of the answers above. Help.

Thank you Anika, your comment helped me figure that out after too many times trying to get it from the Nice user Jason. -James ).prev().show();

Note from above in the //3.1 area.

Anika Jaffara
Anika Jaffara
20,364 Points

Try using .show

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