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 karunaraina
karunaraina
1,352 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

need help

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

2 Answers

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

For this challenge, they want you to select the li elements that are currently being hidden and then use the show() function to display them. The div element should remain hidden.

// You don't really need to create a constant for this.
const $char = $('li:odd') // :odd is a pseudo-selector, but they want you to be using the :hidden selector.
// Using chaining, you can add methods onto selectors directly.

Info Page Links

Method Chaining

Pseudo-Selector

Show Method

Try using this alternate example as a base and see if you can finish the challenge. If you're still having trouble, just let me know and we can walk through a solution.

// 1. select the element(s)
$("div")
// 2. use the pseudo-selector to match only the applicable elements
$("div:visible")
// 3. use the applicable method to change the visibility of the matching elements
$("div:visible").hide();
Barbara Smok
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Barbara Smok
Front End Web Development Techdegree Graduate 14,687 Points
Barbara Smok
.a{fill-rule:evenodd;}techdegree seal-36
Barbara Smok
Front End Web Development Techdegree Graduate 14,687 Points

CSS is being used to hide three items on the index.html page (two <li> elements and a <div> element). Use jQuery's :hidden pseudo selector and the show() method to display the hidden <li> elements, while leaving the <div> element hidden.

Bummer: There was an error with your code: ReferenceError: Can't find variable: $div
index.html app.js

Hi I'm getting this error and I've tried everything to make this work but no luck. Can anyone help me?

const $odd = $('li:odd'); $odd.show(); ā€‹ $div; $div.hide();

Gareth Partridge
Gareth Partridge
13,421 Points
Gareth Partridge
Gareth Partridge
13,421 Points

Hi Barbara

The Following worked for me which I find strange cause I did nothing to the div element.

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

$("li") <---- here you are selecting the element $("li:hidden").show(); <---- here you are using the pseudo selector and then function .show()