How to create a collapsible sidebar with tree structure of uploaded files

Dash Python
21

Oh!

I’m sorry. I have this is my css file.

.hidden {
 display: none
}

It’s just second nature I guess. I have that as a default in all of my websites. XD

1 Like
22

@jinnyzor Thanks a lot! That fixed the issue.

There’s a couple of minor issues however.

  1. When the tree elements expand the first time after typing something in the search bar, the little arrow icon next to each tree/Accordion item seems to be in the reverse orientation. The arrows have to be clicked to get them in the right orientation.
  2. The up arrow buttons of the Accordion items, except that of the first Accordion item, do not work the first time they are clicked. They have to be clicked twice in order for the items to contract. For example, when I type ‘a’ in the search bar, the Accordion items, “assets” and “pages”, expand. When I click the up arrow next to “assets”, “assets” contracts, which is the desired behavior. However, when I do the same with “pages”, i.e. click the up arrow next to “pages”, it does nothing. I have to click it again for “pages” to contract.

Here’s a little video showing the two issues:
2022-12-13_14h11_17

24

@jinnyzor where are you getting the various mantine class names from? Class names like:

.mantine-Accordion-item 
.mantine-Text-root
.mantine-Accordion-itemOpened
.mantine-1avyp1d
.mantine-1xa9lqx
25

From inspecting those elements.