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 Perfect

edmond habimana
PLUS
edmond habimana
Courses Plus Student 8,352 Points
Posted by edmond habimana
edmond habimana
Courses Plus Student 8,352 Points

I now how to reveal the spoilers but i also want to hide them again by clicking the span tag.

i want to be able to click on the span tag, hide it, and reveal the button again. And also still be able to click on that button to reveal spoiler.

this is as far as got:

    var $button = $("<button>REVEAL SPOILER</button>");
    $(".spoiler").append($button);
    $("span").hide();
        $("button").click(function(){
        $(this).prev().show();
        $(this).hide();
    })
        $("span").click(function(){
        $(this).closest(".spoiler").append($button);
        $(this).hide();
    })
});

I am wandering if this might require some kind of loop.

I tried using an IF statement like the code below but it also doesn't work.

$("document").ready(function(){
    var $button = $("<button>REVEAL SPOILER</button>");
    $(".spoiler").append($button);
    $("span").hide();

    if ($("button").length ===  2){

        $("button").click(function(){
        $(this).prev().show();
        $(this).hide();
    })
    }

    if($("button").length === 0){
        $("span").click(function(){
        $(this).closest(".spoiler").show($button);
        $(this).hide();

    })
    }

});

2 Answers

Michal Janek
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Michal Janek
Front End Web Development Techdegree Graduate 30,654 Points
Michal Janek
.a{fill-rule:evenodd;}techdegree seal-36
Michal Janek
Front End Web Development Techdegree Graduate 30,654 Points

No need for loop just use another event handler click for span content. Also in this case you would want to use hide(). on the button element in first case since you want to show it again later. Or if you want to remove it after showing the spoiler you will have to append it again.

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

// Hide the spoiler
$(".spoiler span").hide()
  //add a button
  $(".spoiler").append("<button> Click me</button>");

    //do something when the button is pressed
    $(".spoiler button").click(function() {
      $(this).prev().show();
      $(this).hide(); // i changed remove() into hide()
    })
      // Show the button and hide the spoiler
      $(".spoiler span").click(function() {
        $(this).hide();
        $(this).next().show(); // if you use remove() in previous click(), you have to use append() instead of show() here.

      })
Savannah Lynn
Savannah Lynn
13,662 Points
Savannah Lynn
Savannah Lynn
13,662 Points

Hi there. You can also used the method toggle() to show/hide an element each time you click.