Multidimensional <ul> and <li> list with toggle function for select a concrete image

I'm developing a backend of a website where the user can select an image that has uploaded via FTP. They can create the directories that they want so, I've a PHP recursive function that开发者_Go百科 gets me all the information and creates a list of <ul /> and <li />... but the directory actually is 2GB of images so, imagine, I can't display it all together. I need to toggle/untoggle <ul /> to show directories.

Let's take a structure example. If we have this:

<ul>
    <li><a href="/file14">file14</a></li>
    <li><a href="/file15">file15</a></li>
    <li><a href="/file16">file16</a></li>
    <li class="dirname">
        <a href="/dirname1">dirname1/</a>

        <ul>
            <li class="dirname">
                <a href="/dirname1/Dirname2">Dirname2/</a>

                <ul>
                    <li class="dirname">
                        <a href="/dirname1/Dirname2/Dirname3">Dirname3/</a>

                        <ul>
                            <li><a href="/dirname1/Dirname2/Dirname3/file1">file1</a></li>
                            <li><a href="/dirname1/Dirname2/Dirname3/file2">file2</a></li>
                            <li><a href="/dirname1/Dirname2/Dirname3/file3">file3</a></li>
                        </ul>
                    </li>
                    <li><a href="/dirname1/Dirname2/file4">file4</a></li>
                    <li><a href="/dirname1/Dirname2/file5">file5</a></li>
                    <li><a href="/dirname1/Dirname2/file6">file6</a></li>
                    <li class="dirname">
                        <a href="/dirname1/Dirname2/dirname4">dirname4/</a>

                        <ul>
                            <li><a href="/dirname1/Dirname2/dirname4/file7">file7</a></li>
                            <li><a href="/dirname1/Dirname2/dirname4/file8">file8</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="/dirname1/file9">file9</a></li>
            <li><a href="/dirname1/file10">file10</a></li>
        </ul>
    </li>
    <li><a href="/file11">file11</a></li>
    <li><a href="/file12">file12</a></li>
    <li><a href="/file13">file13</a></li>
</ul>

What the user has to see is that:

* file14
* file15
* file16
* dirname1/
* file11
* file12
* file13

If they click on dirname1/ they will see this:

* file14
* file15
* file16
* dirname1/
    * Dirname2/
    * file9
    * file10
* file11
* file12
* file13

And if they click on Dirname2/ they will see this:

* file14
* file15
* file16
* dirname1/
    * Dirname2/
        * Dirname3/
        * file4
        * file5
        * file6
        * dirname/
    * file9
    * file10
* file11
* file12
* file13

You get the idea, no? I put various examples because my english is not fine so you can understand my idea. Basically the <li class="dirname"> will be the "trigger" but I can't not display all, only when the one I click. If we click when is showing the content, then has to "unshow it".

Other thing I want to do is that the <li /> that has no class="dirname" get the HREF property of the <a /> that I'll save it on a input to process it when saving.

Wish the information is sufficient and thank you in advance!

I think this is what you are after? Basically, it will show any ul that is a child under the li.dirname once li.dirname is clicked. When it is clicked again, it will hide them.

$(".dirname").click(
    function( e )
    {
        $("> ul", this).toggle();
        e.stopPropagation();
    }
);