Question

i want to select a element with jQuery.

<ul>
    <li><label><input type="checkbox" class="checkbox">checkbox1</label></li>
         <ul class="list">
          <li>lorem</li>
          <li>lorem</li>
          <li>lorem</li>
        </ul>
    <li><label><input type="checkbox" class="checkbox">checkbox2</label></li>
         <ul class="list">
          <li>lorem</li>
          <li>lorem</li>
          <li><lorem/li>
        </ul>
 </ul>

I want to hide and show the list thats directly under the checkbox with 1 jQuery function.

 $(".list").hide();

$(".checkbox").click(function() {

    if ($(".checkbox").is(":checked"))
    {
        $("????").show('slow');
    }
    else
    { 
        $("????").hide('slow');
    }
});

The ???? needs to be a selector thats (only) selects the list under the checkbox.

Answer 1

First of all, your HTML is invalid, as you cannot have elements between the li in a ul. Change your HTML to this:

<ul>
    <li>
        <label><input type="checkbox" class="checkbox">checkbox1</label>
        <ul class="list">
            <li>lorem</li>
            <li>lorem</li>
            <li>lorem</li>
        </ul>
    </li>
    <li>
        <label><input type="checkbox" class="checkbox">checkbox2</label>
        <ul class="list">
            <li>lorem</li>
            <li>lorem</li>
            <li><lorem</li>
        </ul>
    </li>
 </ul>

Then you can use the cloest parent li as a context to find the related ul:

$(".list").hide();

$(".checkbox").click(function() {
    var $parentLi = $(this).closest("li");
    if ($(this).is(":checked")) {
        $("ul", $parentLi).show('slow');
    }
    else { 
        $("ul", $parentLi).hide('slow');
    }
});