Make aui:panel collapsed by default

[Jan Ophey, modificado hace 13 años.]

Hello everybody!

I'm developing a portlet, which groups some optional input-fiels in two aui:panels.

Now I want these panels to be in collapsed-state as the portlet-page loads.

Does someone know, how to accomplish this?
The aui:panel-tags do not support a "collapsed"-property (which should be present, regarding to Alloy-Documentation
Do I have to put some javascript-code at the bottom to change the state of the panels after loading the portlet-page?

This is my current JSP-Code:

<aui:form name="fm" action="<%=formActionURL.toString()%>" method="post">

    <aui:fieldset>
        <aui:input name="resourcePrimKey" value="<%=myModel.getPrimaryKey()%>" type="hidden" />
//several aui:input-Tags with some more fields


        <aui:panel collapsible="true" label="Optional elements" id="optionalPanel1">
             // checkboxes with optional flags to select
        </aui:panel>

        <aui:panel collapsible="true" label="More optional elements" id="moreOptionalsPanel">
             // more checkboxes with optional flags to select
        </aui:panel>
        <aui:input type="textarea" name="description" value="<%=myModel.getDescription()%>" />
        <aui:button-row>

            <aui:button type="submit" />
            <aui:button type="cancel" value="Cancel" onClick="<%=cancelURL%>" />

        </aui:button-row>

    </aui:fieldset>

</aui:form>

Thanks in advance,
Jan

[Brian Jamieson, modificado hace 12 años.]

You have two parts to it:
a panel container, and a panel.

You'll want to set id attributes, and you can mess around with extended being true or false.

Hope this helps (even though it's an old post I'm replying to)


<liferay-ui:panel-container extended="<%= true %>"
id="settlementDetailsPanelContainer" persistState="<%= true %>">


<liferay-ui:panel collapsible="<%= true %>" extended="<%= true %>"
id="settlementDetailsPanel" persistState="<%= true %>" title="Settlement Details...">

[Alberto García Balaguer, modificado hace 9 años.]

Hello!

I'd the same problem, and I solved it using the property "defaultState" with the value "collapsed" on it.
This is some example code:

<liferay-ui:panel-container extended="true" id="outerPanelContainer">
    <liferay-ui:panel collapsible="true" defaultstate="collapsed" title="2012">
        <p class="content toggler-content-collapsed">
        outer content </p>
        <liferay-ui:panel-container extended="false" id="innerPanelContainer">
            <liferay-ui:panel collapsible="true" defaultstate="collapsed" extended="false" title="January">
            
                inner content
            </liferay-ui:panel>
        </liferay-ui:panel-container>
    </liferay-ui:panel>
</liferay-ui:panel-container>