Question

I’m trying to select a list item that has been hidden, but can be shown with the slide toggle method.

Here is the HTML

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li id="par1">parent 1</li>
    <ul id="par1list">
      <li>items to select1</li>
      <li>items to select2</li>
      <li>items to select3</li>
    </ul>
  <li id="par2">parent 2</li>
    <ul id="par2list">
      <li>items to select1</li>
      <li>items to select2</li>
      <li>items to select3</li>
    </ul>
</ul>

In the jquery, I’m hiding the sub parent lists (par1list and par2list), but they slide toggle when parent 1 or parent 2 are clicked. here is the jquery:

$(document).ready(function(){
    $("#par1list, #par2list").hide(); //hide elements

    $("#par1").click(function() {
        $("#par1list").slideToggle(400); //click parents to show hidden elements
    });
    $("#par2").click(function() {
        $("#par2list").slideToggle(400); //click parents to show hidden elements
    });

    $("#par1list > li").click(function(){  //select list item from previous hidden ul
        this.css('color', 'red');
    });
});

I’m trying to select a list item from the ul par1, but I can’t figure it out. Thanks!

Answer 1

If i understood correctly you need to use $(this) instead of this

DEMO

$("#par1list > li").click(function(){  //select list item from previous hidden ul
    $(this).css('color', 'red');
});