JQuery layout hide

I use JQuery layout feature to build skeleton of my app.

Layout has north-panel i.e header which can be hidden so that content area has more space.

Since header panel also contains icon bar, I only want icon bar to be visible when header is hidden.

Is there a way to achieve this by setting any property while creating layout using UI Layout.

Here is the image of layout where on hiding header should still show icons but only hide blue bar at the top.

Regards,

Satya

If I understand you correctly, the markup you have would like something like this:

<div id="north-panel">
    <div id="header">
        <div id="icons"></div>
    </div>
</div>

If this is the case, maybe the following may help:

Can you seperate the icons panel to be a direct child of the north-panel? If you can, you could just hide the header and the icons panel would still be visible.

<div id="north-panel">
    <div id="header"></div>
    <div id="icons"></div>
</div>

Otherwise, hiding an element without hiding its children is not possible (as far as I know). What you could try too, is to make the header have the same dimensions as the icons panel and hide anything else inside the header. This would somehow fake the effect you wanted.