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

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points
Posted by Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

How to have only one spoiler revealed each time.

So, I've been thinking that it would be a nice feature if with every next button click the previous spoiler would return to hidden, that way at any given time only one spoiler will be shown. I've been working towards this idea but with no success so far. Any ideas?

2 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Just have the revealing process hide them all first, and then reveal the current one.

For more specific suggestions, show the code or make a snapshot of your workspace and post the link to it here. It's also helpful to provide a link to the course page you are working with.

You can easily hide all the spoilers and reveal all the buttons at the same time:

function hideSpoilers() {
    $('button').show();
    $('.spoiler>span').hide();
 }

Then you can un-comment the line that hides the button when the spoiler is revealed. Note that the loop is not needed with jQuery, since the function applies to all items selected by the jQuery object.

And I'm not sure what you mean by "make a function in jQuery". Functions are part of the JavaScript language itself.

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points
Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

Thank you very much for your response! Most of all for the loop - jQuery clarification. As about the "make a function in jQuery" I meant I have no knowledge if I should use a different syntax when making and calling functions that have jQuery elements and methods in them.

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

The basic syntax of a function remains the same no matter what the function does (or what resources it uses).

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points
Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

Oh, the question should be under this course: https://teamtreehouse.com/library/what-is-traversal part of jQuery basics course. Sorry for that.

This is what I have done so far:

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">
        <span>Darth Vader is Luke Skywalker's Father! Noooooooooooo!</span>
    </p>
    <p class="spoiler">
        <span>Han Solo shot first!</span>
    </p>
    <p class="spoiler">
        <span>Ben dies!</span>
    </p>
    <p class="spoiler">
        <span>Anakin loses an arm!</span>
    </p>
    <p class="spoiler">
        <span>They are siblings!</span>
    </p>
    <p class="spoiler">
        <span>R2 rocks!</span>
    </p>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

jQuery

const $button = $('<button>Reveal Spoiler</button>');
//Append to web page
$('.spoiler').append($button);
//Hide spoiler text
$('.spoiler>span').hide();

$('.spoiler').on('click ', 'button',  function (e) {
    //Show the spoiler text
    hideSpoilers();   
    $(this).prev().show();
    //$('.spoiler>span').show();
    //Hide the "Reveal Spoiler" button
    //$(this).hide();

});

function hideSpoilers() {
    const $buttons = $('button');

    for (let item of $buttons) {
       $('.spoiler>span').hide();
    } 
 }

Please note that I have yet to understand how to make a function in jQuery. As about my code:

  1. As it is right now it does reveal just one spoiler at the time but the button remains visible. I'm trying to hide it.
  2. If the $(this).hide(); is active it hides the buttons for good, they're not visible till I refresh and the page resets.
Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

I revised my answer with an example.