how to create invisible panels

[JeroenNL]

Hello,

I'm using easyui-layout with north and center panels to create a complex page. I want the north panel to be completely invisible until some condition is met and then make it visible. It shouldn't have a title and it shouldn't show the collapsed bar. It also should not take up any space when it is invisible. The center panel should take up all space in that case.

How can I accomplish that?

Cheers,
Jeroen

[jarry]

Set 'collapsed' property to true for the north panel. When the north panel is collapsed, get the corresponding 'expandNorth' panel and close it. Finally call 'resize' method to resize the layout.

Code:

<div id="layout" class="easyui-layout" style="width:700px;height:350px;">
	<div style="height:150px" data-options="
			region:'north',
			collapsed:true,
			onCollapse:function(){
				setTimeout(function(){
					var p = $('#layout').layout('panel','expandNorth');
					p.panel('close')
					$('#layout').layout('resize')
				},0)
			}"></div>
	<div data-options="region:'center'"></div>
</div>