Multidimensional <ul> and <li> list with toggle function for select a concrete image
<p>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 gets me all the information and creates a list of <code>&lt;ul /&gt;</code> and <code>&lt;li /&gt;</code>... but the directory actually is 2GB of images so, imagine, I can't display it all together. I need to toggle/untoggle <code>&lt;ul /&gt;</code> to show directories.</p>

<p>Let's take a structure example. If we have this:</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="/file14"&gt;file14&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/file15"&gt;file15&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/file16"&gt;file16&lt;/a&gt;&lt;/li&gt;
    &lt;li class="dirname"&gt;
        &lt;a href="/dirname1"&gt;dirname1/&lt;/a&gt;

        &lt;ul&gt;
            &lt;li class="dirname"&gt;
                &lt;a href="/dirname1/Dirname2"&gt;Dirname2/&lt;/a&gt;

                &lt;ul&gt;
                    &lt;li class="dirname"&gt;
                        &lt;a href="/dirname1/Dirname2/Dirname3"&gt;Dirname3/&lt;/a&gt;

                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="/dirname1/Dirname2/Dirname3/file1"&gt;file1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="/dirname1/Dirname2/Dirname3/file2"&gt;file2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="/dirname1/Dirname2/Dirname3/file3"&gt;file3&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="/dirname1/Dirname2/file4"&gt;file4&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="/dirname1/Dirname2/file5"&gt;file5&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="/dirname1/Dirname2/file6"&gt;file6&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="dirname"&gt;
                        &lt;a href="/dirname1/Dirname2/dirname4"&gt;dirname4/&lt;/a&gt;

                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="/dirname1/Dirname2/dirname4/file7"&gt;file7&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="/dirname1/Dirname2/dirname4/file8"&gt;file8&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="/dirname1/file9"&gt;file9&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/dirname1/file10"&gt;file10&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="/file11"&gt;file11&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/file12"&gt;file12&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/file13"&gt;file13&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>What the user has to see is that:</p>

<pre><code>* file14
* file15
* file16
* dirname1/
* file11
* file12
* file13
</code></pre>

<p>If they click on dirname1/ they will see this:</p>

<pre><code>* file14
* file15
* file16
* dirname1/
    * Dirname2/
    * file9
    * file10
* file11
* file12
* file13
</code></pre>

<p>And if they click on Dirname2/ they will see this:</p>

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

<p>You get the idea, no? I put various examples because my english is not fine so you can understand my idea. Basically the <code>&lt;li class="dirname"&gt;</code> 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".</p>

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

<p>Wish the information is sufficient and thank you in advance!</p>
