CODEWITHSUNDEEP
javascriptjqueryhtml
Doron Sinai
Doron Sinai

Reputation: 1186

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

Upvotes: 2

Views: 574

Answers (4)

Rion Williams
Rion Williams

Reputation: 76557

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)

Upvotes: 3

Tomgrohl
Tomgrohl

Reputation: 1767

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

Upvotes: 0

pimvdb
pimvdb

Reputation: 154838

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>

Upvotes: 0

Jayne Mast
Jayne Mast

Reputation: 1487

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>

Upvotes: 0

Related Questions