A dialog which can collapse with a button, in HaxeUI.

CollapsibleDialog.hx

// package;

import haxe.ui.containers.dialogs.Dialog;

class CollapsibleDialog extends Dialog
{
	public var dialogMinMaxButton:haxe.ui.components.Image;

	var _minimized:Bool = false;

	public function new()
	{
		super();

		dialogMinMaxButton = new haxe.ui.components.Image();
		dialogMinMaxButton.id = "dialog-minmax-button";
		dialogMinMaxButton.styleNames = "dialog-minimize-button";
		dialogTitle.addComponent(dialogMinMaxButton);

		// Move the button before the close button
		dialogTitle.setComponentIndex(dialogMinMaxButton, 1);

		dialogMinMaxButton.onClick = function(e)
		{
			if (_minimized)
			{
				// Maximize.
				expandBody();
			}
			else
			{
				// Minimize
				collapseBody();
			}
		}
	}

	public function collapseBody()
	{
		if (_minimized)
			return;

		// Toggle the state variable.
		_minimized = true;

		// Switch the button classes.
		dialogMinMaxButton.addClass("dialog-maximize-button");
		dialogMinMaxButton.removeClass("dialog-minimize-button");

		// Actually edit the dialog.
		this.height -= dialogContent.height;
		dialogContent.hidden = true;
	}

	public function expandBody()
	{
		if (!_minimized)
			return;

		// Toggle the state variable.
		_minimized = false;

		// Switch the button classes.
		dialogMinMaxButton.addClass("dialog-minimize-button");
		dialogMinMaxButton.removeClass("dialog-maximize-button");

		// Actually edit the dialog.
		this.height += dialogContent.height;
		dialogContent.hidden = false;
	}
}