X3Photo Gallery Forums

I’m using Style Slidemenu, which contains several folders and subfolders. When I navigate from a folder with subfolders to another folder, the first folder collapses. This does not happen when I select a folder that doesn't have subfolders. I would like the previously opened folders to always collapse, regardless of whether I select a folder/subfolder or just a folder without subfolders.
 
I believe a custom JavaScript solution is needed for this. I've tried a number of code snippets, but none have worked.

Karl, thanks for your explanation and I can understand you can't do that for just one website. But I think many more websites use the Slidemenu and might also encounter the same issue: collapsing the menus is more aesthetically. But I can live with it!

Do you think the following code wil work when ".folder-toggle must be a class that appears on every clickable folder iten" and ".subfolder must be the clas of the element containing the subfolders"?
<script>
document.addEventListener("DOMContentLoaded", function () {
    var folders = document.querySelectorAll(".folder-toggle");

    folders.forEach(function(folder) {
        folder.addEventListener("click", function () {
            // Sluit alle andere mappen
            folders.forEach(function(f) {
                if (f !== folder) {
                    f.classList.remove("open");
                    var sub = f.nextElementSibling;
                    if (sub && sub.classList.contains("sub-folder")) {
                        sub.style.display = "none";
                    }
                }
            });

            // Open of toggle de geklikte map
            folder.classList.toggle("open");
            var sub = folder.nextElementSibling;
            if (sub && sub.classList.contains("sub-folder")) {
                if (sub.style.display === "none" || sub.style.display === "") {
                    sub.style.display = "block";
                } else {
                    sub.style.display = "none";
                }
            }
        });
    });
});
</script>