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 Peter Gess
Peter Gess
16,553 Points

CSS is being used to hide three items on the index.html page (two <li> elements and a <div> element). Use jQuery's :hidd

What am I missing?

const $li = $('li:hidden') $li.show()

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

li.show()

5 Answers

Balazs Peak
Balazs Peak
46,160 Points

I'm taking a wild guess here, but my strongest intuition is that your code would work just fine programmatically, but the Treehouse platform expected a more simple solution, that's why it didn't accept your code.

$("li:hidden").show();
Peter Gess
Peter Gess
16,553 Points

That worked! They should fix that.

Max van den Berge
Max van den Berge
6,506 Points

this one works! thx

Edgar Rojas
seal-mask
.a{fill-rule:evenodd;}techdegree
Edgar Rojas
Full Stack JavaScript Techdegree Student 5,339 Points
Edgar Rojas
.a{fill-rule:evenodd;}techdegree
Edgar Rojas
Full Stack JavaScript Techdegree Student 5,339 Points

I ran into the same problem!!! Why would she show us how to create this code const li = $('li:hidden') li.show();

and not work unless we simplify to $("li:hidden").show(); It should be explained in her tutorials at least!!!!

Franklyn Gregory
Franklyn Gregory
12,098 Points

Yes... I was stuck on this one the same way too. It was driving me crazy. I'm glad, I found out I wasn't the only one.

Nuriddin Ikramov
Nuriddin Ikramov
5,866 Points

Because these codes are a bit different from each other.

1)const li = $('li:hidden'); li.show();
Here you created a new variable and evaluated it to the hidden lists. And then you show it. It uses addition memory size. So the compiler sees that another element being created.

2) $("li:hidden").show(); While in this example, you don't create anything, you just showing the hidden elements.

It is important to understand the difference between them, as later you may end up using a lot of memory size.

Ronald Wimbush
Ronald Wimbush
6,939 Points
Ronald Wimbush
Ronald Wimbush
6,939 Points

I was stuck on this for about 10 minutes, thankfully I found this!

Abdulrahman Al Ani
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Abdulrahman Al Ani
PHP Development Techdegree Graduate 17,607 Points
Abdulrahman Al Ani
.a{fill-rule:evenodd;}techdegree seal-36
Abdulrahman Al Ani
PHP Development Techdegree Graduate 17,607 Points

this really needs to be fixed. I was stuck on this for a while. ugh.

Lia Mun
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Lia Mun
UX Design Techdegree Graduate 22,246 Points
Lia Mun
.a{fill-rule:evenodd;}techdegree seal-36
Lia Mun
UX Design Techdegree Graduate 22,246 Points

Agreed. this needs to be fixed