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 Perform: Part 3

Posted by Quicken Loans
Quicken Loans
12,654 Points

Why not use .hide() here to hide the button after its pressed?

Seeing as how we as using .show(), is there a reason we shouldn't use the .hide() method to take the button away after it has been pressed?

3 Answers

Devin Gray
Devin Gray
39,261 Points
Devin Gray
Devin Gray
39,261 Points

You can, but the subject was just to create a spoiler, so after you hit show, there's supposed to be no need to hide it again.

I added something similar to my site, but I wanted to be able to show and hide, and for that, it's better to use .toggle() which will alternate between .show() and .hide() when the button is clicked.

Margarita Ignatyeva
Margarita Ignatyeva
2,694 Points
Margarita Ignatyeva
Margarita Ignatyeva
2,694 Points

Devin, thank you for the advice on toggle(). but how do you hide the button once it is clicked? in my code, the toggle works, but im not sure where to add the hide() method so that the button is removed once the spoiler is shown.

Johnny Garces
PLUS
Johnny Garces
Courses Plus Student 8,551 Points
Johnny Garces
Johnny Garces
Courses Plus Student 8,551 Points

hi Margarita,

to answer your question, once the spoiler is shown, you can hide the button by using the click event. The word "this" is used like a pronoun so that you don't have to repeat the element "button" more than once. So you would use $(this).hide(); as a method instead of $('button').hide();

  $(document).ready(function(){
      $('.spoiler span').hide();
    //Reveal spoiler warning button//
     $('.spoiler').append('<button>Click here to reveal spoiler</button>');

  //when clicked, it reveals span content//

    $('button').click(function(){
       $('.spoiler span').show();
       $(this).hide();

 });

});

Does this help?

Prince Sargbah
Prince Sargbah
2,551 Points
Prince Sargbah
Prince Sargbah
2,551 Points

While Andrean was on looking on api.Jquery.com, I had already put in the hide() event and it worked perfectly. And when he talked about the remove(), I try it and it work same as the hide too. So I guess they both work the same.