I have a vertical menu and I’m trying to create a dropdown like what you can see in Xano:
How do I do this? I tried using the “hover dropdown” element but when I expand the dropdown, everything below the dropdown does not move down as well and it blocks the rest of the menu contents below it. I hope this makes sense.
Also, I want it to be default “opened” and not closed. Meaning i want the dropdown to be expanded by default, and can’t seem to find an option for that? Right now I have to click or hover on the arrow for it to open. I want it to be open by default.
There are 2 potential ways I would approach this:
-
Use the ‘expanded layout’ element - this is basically an accordion type of element (commonly used in FAQ sections) that you could format to be toggled open by default, and collapse on header click. It’s a native element that seems to accomplish what you want right out of the box with some tinkering.
-
Build it from scratch. If you don’t like working with the expanded layout element, you can always try building it from scratch. For this use case, I would do this:
a. Container one for each section, 2 containers (one for the toggle and one for the body)
b. Create an array variable with some default value (I typically use text)
c. Set the body container to display when desired value is in the variable’s array
d. Create a workflow for the toggle such that when the toggle is clicked, the aforementioned value is removed from the variable’s array
d.1. For the workflow, you will need a true/false split for adding/removing the desired value
d.2. The reason I recommend using an array instead of a boolean is so that you can store multiple values at once - one value per toggle. If you only want one toggle, then I recommend using a boolean as it is much easier to put together this way. Alternatively, if you just don’t like working with arrays, you can create a variable folder specifically for your toggle variables and have one boolean variable for each toggle section.
I hope this was helpful!
1 Like
