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

Jiten Mehta
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jiten Mehta
Front End Web Development Techdegree Graduate 21,209 Points
Posted by Jiten Mehta
.a{fill-rule:evenodd;}techdegree seal-36
Jiten Mehta
Front End Web Development Techdegree Graduate 21,209 Points

Can't pass this code challenge...

Hi guys, I can't seem to pass this code challenge.

The challenge is asking me to show the hidden li elements using Jquery.

This is the code i used.

const $Picard = $('li:hidden');

$Picard.show();

It shows in the preview but I am not passing the challenge. Any ideas?

Thanks, Jiten.

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 $Picard = $('li:hidden');

$div.show();

3 Answers

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

The variable names don't match in the inset code sample ("$Picard" vs. "$div"), but I think the more important issue is that the challenge doesn't really want you to create an intermediate variable (even though it would work in practice).

Try applying the "show" method directly to the jQuery object created with the selector.

Jiten Mehta
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jiten Mehta
Front End Web Development Techdegree Graduate 21,209 Points
Jiten Mehta
.a{fill-rule:evenodd;}techdegree seal-36
Jiten Mehta
Front End Web Development Techdegree Graduate 21,209 Points

Hi Steve, thanks for this. The variable names did not match because I was experimenting at the time I posted this question, that was my mistake.

You were right, I did not need to create a variable.

The following worked,

$(li:hidden).show();

As someone who is used to working with HTML and CSS, Javascript is very difficult to get my head around.

Thanks again, Jiten.

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

jQuery can sometimes seem like another language of its own!

Joseph Cowan
Joseph Cowan
6,231 Points
Joseph Cowan
Joseph Cowan
6,231 Points

Oh this helped. I have a thing for turning things into variables and didn't realize they weren't asking for that. Thanks for this!