VGui Collapsable Categorys

So i am trying to stack collapsible category under each other and have them move when they are clicked so they dont overlap. How could i go about doing this? I know i could do it when collapsed and uncollapsed but then itd be jumpy, because they are animated. Would it be to resource intensive to set its position it through paint? Thanks in advance.

Paint is a think hook if I’m right. Shouldn’t they automaticly move already like seen in the Spawn menu?

Do something like this:



local pod = vgui.Create( "DScrollPanel", frame )
pod:Dock( FILL )
pod:DockMargin( 4, 2, 1, 2 )

pod.Items = vgui.Create( "DIconLayout", pod )
pod.Items:SetLayoutDir( TOP )
pod.Items:Dock( FILL )
pod.Items:SetSpaceY( 2 )

--If you want to fill the panel from a table
for k, v in pairs( whatever ) do
  local x = pod.Items:Add( "DCollapsibleCategory" )
  x.OwnLine = true
  --Whatever else you need to do
end

It gives you a scrollable list that should have the items adjust their positions.

Then they just overlap, so im asking how would i go about updating it without being super resource intensive

bump




	local Panel = vgui.Create( "DPanel" )
	Panel:SetPos( 0, 0 )					
	Panel:SetSize( 250, 100 )

	local pod = vgui.Create( "DScrollPanel", Panel )
	pod:Dock( FILL )
	pod:DockMargin( 4, 2, 1, 2 )

	pod.Items = vgui.Create( "DIconLayout", pod )
	pod.Items:SetLayoutDir( TOP )
	pod.Items:Dock( FILL )
	pod.Items:SetSpaceY( 2 )

	local shirts = pod.Items:Add( "DCollapsibleCategory" )
	shirts.OwnLine = true
	shirts:SetSize(200,10)
	shirts:SetExpanded(0)
	shirts:SetLabel( "Shirts" )
		CategoryList = vgui.Create( "DPanelList" )
		CategoryList:SetAutoSize( true )
		CategoryList:SetSpacing( 5 )
		CategoryList:EnableHorizontal( false )
		CategoryList:EnableVerticalScrollbar( true )
 

	shirts:SetContents( CategoryList )
    local CategoryContentOne = vgui.Create( "DCheckBoxLabel" )
    CategoryContentOne:SetText( "God Mode" )
    CategoryContentOne:SetConVar( "sbox_godmode" )
    CategoryContentOne:SetValue( 1 )
    CategoryContentOne:SizeToContents()
	CategoryList:AddItem( CategoryContentOne ) 


	local pants = pod.Items:Add( "DCollapsibleCategory" )
	pants.OwnLine = true
	pants:SetSize(200,10)
	pants:SetExpanded(0)
	pants:SetLabel( "Pants/Shoes" )


am i doing something wrong ;-;

Why are you using DIconLayout when it’s easier to just Dock(TOP) every new CollapsibleCategory and when they open they don’t overlap and push other ones down.

Example from my HUD’s options menu.



	local cat_color = vgui.Create("DCollapsibleCategory",panel)
	cat_color:Dock(TOP)
	cat_color:SetExpanded(1)
	cat_color:SetLabel("Colors")
	cat_color.Header:SetIcon("icon16/color_wheel.png")
	cat_color.AddItem = function(cat,ctrl) ctrl:SetParent(cat) ctrl:Dock(TOP) end

	local label_bg = vgui.Create("DLabel",panel)
	label_bg:DockMargin(5,5,0,0)
	label_bg:SetFont("DermaDefault")
	label_bg:SetText("Background Color:")
	label_bg:SetColor(Color(0,0,0))
	label_bg:SizeToContents()
	cat_color:AddItem(label_bg)