jquery ul toggle problem

I have the following code:

        <ul id="reportType">
            <li>A</li>
                <ul id="Ul1">
                    <li>B</li>
                    <li>C</li>
                </ul>
            <li>AA</li>
                <ul id="bpmReportsList">
                    <li>D</li>
                    <li>E</li>
                </ul>
            <li>AAA</li>
        </ul>

<script type="text/javascript" >
$(document).ready(function(){

 $('#reportType').children('li').click(function() {
        $(this).find('li').toggle();
 });
});
</script>

When you click one of the upper li's (the A, AA, AAA) i want it to toggle the li beneath it but it does开发者_JS百科n't do that

I know it chooses the right li because i managed to hide the specific li but not whats under it

any thoughts?

thanks

doron

Your jQuery code is fine, you only needed to make a small change to your HTML.

The only change is to make your ul elements children of your top level li elements, as shown below:

<ul id="reportType">
    //Item 1
    <li>A
        <ul id="Ul1">
            <li>B</li>
            <li>C</li>
        </ul>
    </li>

    //Item 2
    <li>AA
        <ul id="bpmReportsList">
            <li>D</li>
            <li>E</li>
        </ul>
    </li>

    //Item 3
    <li>AAA
    </li>
</ul>

Updated jQuery to handle Nested Lists:

$('#reportType li > ul').each(function(i) {

    var parent = $(this).parent('li');

     var ul = $(this).remove();
     parent.click(function(){
            ul.toggle();
     });

    parent.append(ul);
});

// Initially hides all sub-lists
$('ul ul').hide();

Working Demo | Working Demo (with Nesting)

Your indenting makes it seem like you think the uls are children of the li. However, this is not the case because the uls aren't wrapped inside the parent li at all.

You might want something along the lines of this instead: http://jsfiddle.net/pimvdb/KNFhu/1/.

<ul id="reportType">
    <li>A
        <ul id="Ul1">
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>AA
        <ul id="bpmReportsList">
            <li>D</li>
            <li>E</li>
        </ul>
    </li>
    <li>AAA</li>
</ul>

Your <ul>'s should be nested inside the <li>'s, like so:

     <ul id="reportType">
        <li>A
            <ul id="Ul1">
                <li>B</li>
                <li>C</li>
            </ul>
        </li>
        <li>AA
            <ul id="bpmReportsList">
                <li>D</li>
                <li>E</li>
            </ul>
        </li>
        <li>AAA</li>
    </ul>

<script type="text/javascript" >
$(document).ready(function(){

  $('#reportType').children('li').click(function() {
    $(this).find('li').toggle();
   });
});
</script>

The ul elements needed to be wrapped in the li's, not put underneath them:

<ul id="reportType">
    <li>A
        <ul id="Ul1" class="hidden">
            <li>B</li>
            <li>C</li>
        </ul>
    </li>
    <li>AA
        <ul id="bpmReportsList" class="hidden">
            <li>D</li>
            <li>E</li>
        </ul>
    </li>
    <li>AAA</li>
</ul>



$('#reportType').children('li').click(function() {
    $(this).next('ul').toggle();
});

Working demo here