Collapsing / expanding list

[Geest]

Hi everyone, new user here!

I'm currently working on my first addon, and I'm new to Lua.

I'm attempting to create a sidebar menu, with expanding / collapsing menu items, in order to show submenu items. An example of what I'm trying to achieve can be found here: https://www.w3schools.com/bootstrap/...p_collapse.asp
Another example of what I'm trying to achieve can be found in the Adventurer Guide in-game. When looking up information about a boss fight, there are expanding / collapsing menu items with information of the boss abilities.

I've tried searching these forums (and outside) for answers, but haven't found any so far. I don't believe I'm the first to ask this question, so I've probably just used the wrong keywords.

Edit: I'd like to add that, so far, the UI is created with XML. I'd like the menu items below the menu item which is being opened to be pushed down. Will I have to create my UI with Lua, or is it still possible with XML?

[MunkDev]

A good way to handle this is to define a baseline height for an item when closed, then use a child frame to hold your content. Calculate the new height as the baseline plus the height of the child, and you end with only a few lines of code for handling the entire thing.

Anchor the subsequent menu item with the top to the previous menu item's bottom. When an item is opened, you should, as mentioned above, have some handling in Lua to resize the frame to fit the content it holds. The subsequent items will be pushed down automatically because of how they are anchored. E.g.

<Frame name="SubmenuItemTemplate" virtual="true">
	<Size x="100" y="20"/>
</Frame>

<Frame parentKey="Item1" inherits="SubmenuItemTemplate">
	<Anchors>
		<Anchor point="TOP"/>
	</Anchors>
</Frame>
<Frame parentKey="Item2" inherits="SubmenuItemTemplate">
	<Anchors>
		<Anchor point="TOP" relativeKey="$parent.Item1" relativePoint="BOTTOM"/>
	</Anchors>
</Frame>
<Frame parentKey="Item3" inherits="SubmenuItemTemplate">
	<Anchors>
		<Anchor point="TOP" relativeKey="$parent.Item2" relativePoint="BOTTOM"/>
	</Anchors>
</Frame>

[MunkDev]

Here's an almost relevant example of dynamic resizing and anchoring handled in Lua when you have an arbitrary amount of elements.
Anchoring: https://github.com/seblindfors/Conso...ic.lua#L45-L73
Resizing: https://github.com/seblindfors/Conso...on.lua#L42-L43
In action: https://youtu.be/q3TA0S5cSZQ?t=1m25s

[Geest]

Thank you very much! I've finally got time to play around with it now, looking forward to see the result.