Search code examples
jqueryhtmlliferayportletalloy-ui

Accordion in Liferay / Collapsable Navigation

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

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?

Solution

  • 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>