• Contact Us: 1 604 930 0768
Learn how to display a Tree View in Alfresco with collapsible capacity without any plugin, simply by using CSS.

Last week I had to display results in Tree View, with collapsible capacity. As you know there are many plug-ins extensions available and I’ve seen various examples about doing it with CSS. They’ve all required JavaScript but as I am working in Alfresco repository side webscript I can’t afford those extensions and plugins. In this article, I will explain the solution I found, using CSS to display the content as collapsible tree view.

The demo is built using an ordered list (ol) nested with further ordered lists to naturally represent a basic folder structure. We have switched the label to come first then the input so the “folders” could be expanded/collapsed by checking/unchecking the checkbox.

The outcome looks like below:

tree

 

HTML Code:

CSS Code:

 

Reva supports a large range of technologies and has extensive experience on various content management solutions.

Leave a Reply

Your email address will not be published.

*

X