Question

Why does this jquery not slide toggle my php generated list?

I’ve tried changing a couple of things to get this to work and none worked.

EX: $('ol>li:has(ol)').click $(this).children('ol').slideToggle(); $(this).siblings('ol').slideToggle();

PHP:

function listFolderFiles($dir){
    $ffs = scandir($dir);
    echo '<ol class="list_hold">';
    foreach($ffs as $ff){
        if($ff != '.' && $ff != '..'){
            echo '<li class="list">'.$ff;
            if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff);
            echo '</li>';
        }
    }
    echo '</ol>';
}

Jquery:

$(document).ready(function(){
    $('ol ol').slideUp();
    $('ol>li').click(function(){
        $(this).next('ol').slideToggle();
    });
});

HTML example:

<ol>
<li class="list">find_folders
<ol class="list_hold" style="display: none; ">
    <li class="list">Thumbs.db</li>
    <li class="list">find.css</li>
    <li class="list">find.php</li>
    <li class="list">index.php</li>
    <li class="list">minus.png</li>
    <li class="list">plus.png</li>
    <li class="list">test folder
        <ol class="list_hold" style="display: none; ">
            <li class="list">bananas</li>
        </ol>
    </li>
</ol>
</li>
</ol>

Answer 1

Based on your supplied html, you’ll need to do something like this:

$('li:has(ol)').each(function () {
    $(this).children('ol').slideUp();
    $(this).on("click", function (event) {
        event.stopPropagation();
        $(this).children('ol').slideToggle();
    });
});

http://jsfiddle.net/farneman/n2Arc/2

The main issue is that your selectors were not correct with your actual html.