Use directory tree to display folders level by level on webpage based on user click

Question

I have made a directory tree(i.e, a tree of the folders, it's subfolders and the subfolders' subfolders and so on) in my python file and I want to display that tree onto my webpage. So I send the tree to a HTML file.

<body>
    <ul id="myUL">
        <li><span class="caret">{{ tree.name }}</span>
          <ul class="nested">
            {%- for item in tree.children recursive %}
              <li>
            {%- if item.isDir -%}
                {{ item.name }}
            {%- else -%}
                <a href = "/home/show/{{role}}/{{item.path}}"> {{ item.name }}</a>
            {%- endif %}
              </li>
            {%- if item.children -%}
            <li><span class="caret">{{ item.children.name }}</span>
              <ul class="nested">
                {{loop(item.children)}}
              </ul>
            </li>
            {% endif %}
            {% endfor %}
        </ul>
        </li>
    </ul>

    <script>
        var toggler = document.getElementsByClassName("caret");
        var i;

        for (i = 0; i < toggler.length; i++) {
          toggler[i].addEventListener("click", function() {
            this.parentElement.querySelector(".nested").classList.toggle("active");
            this.classList.toggle("caret-down");
          });
        }
    </script>
</body>

I expect the output as Main_Folder

and when I click on that it should display Subfolder1 Subfolder2

and so on recursively.

But the output I'm getting is just Main_Folder

Use directory tree to display folders level by level on webpage based on user click

0 Answers0