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

Chris Theriot
seal-mask
.a{fill-rule:evenodd;}techdegree
Chris Theriot
Front End Web Development Techdegree Student 8,175 Points
Posted by Chris Theriot
.a{fill-rule:evenodd;}techdegree
Chris Theriot
Front End Web Development Techdegree Student 8,175 Points

I am having trouble completing this code challenge. I do not know how to use the :hidden selector.

I did my own research online but I still cannot see or understand what I am doing wrong. The lesson before this challenge covered how to use specific selectors but did not cover using the :hidden selector. I tried my best to use the methods taught when using other selectors when trying to get this one to work but I am at a loss now. Any help or guidance would be greatly appreciated!

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

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Straight away it looks to me like a problem trying to select an element that has a pseudo selector. :-)

Instead of storing it in a variable try passing the selector directory to the show() method and select the :hidden pseudo selector the same way you would with CSS!

Good luck!

Chris Theriot
seal-mask
.a{fill-rule:evenodd;}techdegree
Chris Theriot
Front End Web Development Techdegree Student 8,175 Points
Chris Theriot
.a{fill-rule:evenodd;}techdegree
Chris Theriot
Front End Web Development Techdegree Student 8,175 Points

I'm still lost.... If I'm trying to target the <li> items that are currently hidden and get them to display I need to use the show() method at some point. So, do it put the :hidden selector inside the show() method? In normal CSS I would simply target .li and set the visibility to hidden. I am still not understanding how to do that with jQuery.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Here's what I mean.

Instead of using hidden.show();

where hidden refers to the variable, you can pass your jQuery selector directly do it. You're trying to select the li elements in their markup form... but jQuery won't recognise that.

But you can use the selector in its CSS form.

So without giving the answer away explicitly you can do something like 

$('select_as_if_your_are_using_css').show()