JavaScript jQuery Basics Working with jQuery Collections Working with jQuery-Specific Selectors

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')

1 Answer

rydavim
MOD
rydavim
Treehouse Moderator 16,813 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();