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

Posted by Rachel Siu
Rachel Siu
5,506 Points

I'm stuck in this challenge I don't know what I did wrong

I don't know what I might have done wrong with this code. I tried watching the tutorial video again and I'm pretty sure this code can work

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 
var $hiddenElements = $('li:hidden');
$hiddenElements.show();

1 Answer

Ezell Frazier
Ezell Frazier
22,110 Points
Ezell Frazier
Ezell Frazier
22,110 Points

The application is attempting to select an element which does not exist (a li tag with an attribute of style="display: none;").

Add the style attribute to your markup and your app will function as intended.

<li style="display:none;">Captain Jean Luc Picard</li>
Michael Zeta
Michael Zeta
18,135 Points

The task explained that there was "hidden CSS" that was causing the last two list items to be hidden. If you open the challenge and click preview, the last two list items do not display despite being there in the markup. The question asks to use the :hidden pseudo class and the .show() method on the last two, already hidden, list items. This code should work, I'm not sure why it doesn't.