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 Working with jQuery Collections Working with jQuery-Specific Selectors

benjaminmosery
benjaminmosery
6,346 Points
Posted by benjaminmosery
benjaminmosery
6,346 Points

Challenge: Using :hidden Pseudo Selector

The challenge is asking me to reveal elements hidden by CSS by targeting them with the hidden pseudo selector and then using the .show() method. However when I use the :hidden selector there is an error. What am I doing wrong?

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <h2>Star Trek Characters</h2>

    <ul class="character-list">
        <li>Captain Jean Luc Picard</li>
        <li>Data</li>
        <li>Worf</li>
        <li>Dr. Crusher</li>
    </ul>

    <div>I am supposed to stay hidden!</div>    

    <script
    src="jquery-3.2.1.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
app.js 
const $li = $('a:hidden');
$li.show();

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

The challenge is to "display the hidden <li> elements", but your selector is targeting anchors (a) instead of list items.

But another issue seems to be caused by the creation of an intermediate variable. While it would work in actual practice, it seems to confuse the challenge validator. Try performing the task with a single statement, calling the "show" method directly on the selected object.

If you want, you can submit a bug report as described on the Support page.

benjaminmosery
benjaminmosery
6,346 Points
benjaminmosery
benjaminmosery
6,346 Points

After targetting the list items, as recommended, and using only a single statement, despite the videos creating a variable first, I came up with the following:

$("li:hidden").show();

This helped solved the problem, thank you.