Question

I have the following PHP code to display the file structure of my site. This gives my a very nice indented structure with folder and file images.

How can I add JQuery to this so I can collapse and expand the folders? I tried a couple of jquery plugins but they didn’t work.

Can you suggest a jquery plugin or an article or code snippet?

Thank you!

<?php
$path = ROOT_PATH;
$dir_handle = @opendir($path) or die("Unable to open $path");
list_dir($dir_handle,$path);

function list_dir($dir_handle,$path)
{
    echo "<ul>";

    while (false !== ($file = readdir($dir_handle))) 
    {
        $dir =$path.'/'.$file;
        if(is_dir($dir) && $file != '.' && $file !='..' )
        {
            $handle = @opendir($dir) or die("undable to open file $file");
                echo '<li><a href="#"><input name="" type="image" src="themes/default/images/explore/folder.png" />'.$file.'</a></li>';
            list_dir($handle, $dir);
        }
        elseif($file != '.' && $file !='..')
        {
            echo '<li><a href="?f='.SITE_URL.$file.'"><input name="" type="image" src="themes/default/images/explore/file.png" />'.$file.'</a></li>';
        }
    }

    echo "</ul>";

    closedir($dir_handle);
}
?>

Answer 1

With the structure you have, a nested <ul> tree, this should be relatively easy.

Your folders all have <li> elements with anchors in them, not quite sure why as you have input-images inside them which are clickable in their own right. Put a class on these anchors or the input called “folder” or somesuch. Then all you need to do is hide all the ULs to start with apart from the root folder and use jQuery to show/hide the nested <ul> lists when a user clicks on the associated folder.

Providing you setup that “folder” class, try the following code.

/* if you want to hide all but the root with code */
$('ul:gt(0)').hide();

$('.folder').click(function() {
    $(this).parents('li:first').next('ul').slideToggle('slow');
    return false;
});