Derma's overlapping

[Brgmry]

Hey I am wanting to create something like this:

Credits to fearless.
This is where I have got to:

So that is all good. However whenever I expand them they overlap like this:

My code (I am a noob so if it is untidy & bad im sorry):
-- COLLAPSIBLE
local collhelp1 = vgui.Create( "DCollapsibleCategory", Frame )
collhelp1:SetPos( 400, 200 )
collhelp1:SetSize( Frame:GetWide() / 1.3, Frame:GetTall() )  
collhelp1:SetExpanded( 0 )
collhelp1:SetLabel( "Errors/Missing Textures" )
collhelp1:SetVisible( false ) 
local listhelp1 = vgui.Create( "DScrollPanel", Frame )
collhelp1:SetContents( listhelp1 )
local contenthelp1 = vgui.Create( "DLabel" )
contenthelp1:DockMargin(5,5,0,0)
contenthelp1:SetText( "Test" )
contenthelp1:SetFont("Trebuchet20")
contenthelp1:SetTextColor( Color( 0, 0, 0, 255 ) )
contenthelp1:SizeToContents()
listhelp1:AddItem( contenthelp1 )
contenthelp1.Paint = function()
surface.SetDrawColor( 255, 255, 255, 255 )
surface.DrawRect( 0, 0, contenthelp1:GetWide(), contenthelp1:GetTall() )
end
-- COLLAPSIBLE
local collhelp2 = vgui.Create( "DCollapsibleCategory", Frame )
collhelp2:SetPos( 400, 225 )
collhelp2:SetSize( Frame:GetWide() / 1.3, Frame:GetTall() )  
collhelp2:SetExpanded( 0 )
collhelp2:SetLabel( "Crashing/Low FPS" )
collhelp2:SetVisible( false ) 
local listhelp2 = vgui.Create( "DScrollPanel", Frame )
collhelp2:SetContents( listhelp2 )
local contenthelp2 = vgui.Create( "DLabel" )
contenthelp2:SetText( "Test" )
contenthelp2:SetFont("Trebuchet20")
contenthelp2:SetTextColor( Color( 0, 0, 0, 255 ) )
contenthelp2:SizeToContents()
listhelp2:AddItem( contenthelp2 )
contenthelp2.Paint = function()
surface.SetDrawColor( 255, 255, 255, 255 )
surface.DrawRect( 0, 0, contenthelp2:GetWide(), contenthelp2:GetTall() )
end

So basically what I need help with is how to set the position of the collapsible panel below depending on the extended "surface.DrawRect( 0, 0, contenthelp2:GetWide(), contenthelp2:GetTall() )".
I have already tried a few things and searched things up but I am really stuck on it :/
BTW if there is an easier way to do this instead of a paint function (for the white background) please do tell me.

[chudders1231]

so when you click the blue rectangles and the panel drops down below it, create a value with the height of both the dropdown panel and the blue rectangles and add that to the Y value of the blue rectangles below it.
Im pretty sure my way is not optimized and there is probably an easier and less intensive way to do this but this is the first way that came to my head.

[Rubat]

You should use DCategoryList for this.