Question

I have an unordered list whose lis are invisible (display:none) to begin with.

I want to make a specific li visible with a JS function. How can I do that?

I’ve tried $("#my-list li:nth-child(1)").fadeIn() but that only works if the ul is visible to begin with.

Here’s my code:

ul.hide > li {
    display: none;
}

<ul class="hide" id="my-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

I’m trying to answer this question. Feel free to take a stab at it!

Answer 1

Like bdares said, an invisible element cannot have a visible child. So what you said about the code is true: ul has to be visible to begin with.

Looking at the html code you could probably just remove class="hide" which will make the ul visible.

However if you can’t do that, an alternative is to use Javascript to make ul visible on the fly. Instead of just:

$("#my-list li:nth-child(1)").fadeIn();

Do

$("#my-list").show();
$("#my-list li:nth-child(1)").fadeIn();