Accordion in Liferay / Collapsable Navigation

Question

in Liferay 6.2, I can see that all of the below options are basically collapsible.

I would like to make a list in my portlet the same. My sample data is

<ul> Header 1
    <li> Sub Header 1</li>
    <li> Sub Header 2</li>
</ul>
<ul> Header 2
    <li> Sub header 1</li>
    <li> Sub header 2</li>
</ul>

Could anyone post an example or how to achieve this?

Embolism

You can make use of Liferay UI tags liferay-ui:panel-container and liferay-ui:panel . For example code you can refer to liferay-portal-src-6.2.0-ce-ga1\portal-web\docroot\html\portlet\control_panel_menu\view.jsp – Tubate

Answer 1

You can make use of Liferay UI tags liferay-ui:panel-container and liferay-ui:panel .

For example code you can refer to

liferay-portal-src-6.2.0-ce-ga1\portal-web\docroot\html\portlet\control_panel_m‌​enu\view.jsp

EDITED:

<liferay-ui:panel-container accordian="true" extended="true">
   <liferay-ui:panel title="1">
        content 1
   </liferay-ui:panel>

  <liferay-ui:panel title="2">
        content 2
 </liferay-ui:panel>
</liferay-ui:panel-container>

Tubate

I have implemented the same. however clicking on one of the expand button, minimizing the other menus/shrinking others. How can I make sure so that, any numbers of panels can be expanded. aka expanding one panel shouldn't effect others – Embolism

Set accordian='false' for that – Tubate