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:
HTML Code:
<ol class="tree">
<li>
<label for="folder1">Folder 1</label> <input type="checkbox" checked disabled id="folder1" />
<ol>
<li class="file"><a href="#">File 1</a></li>
<li>
<label for="subfolder1">Subfolder 1</label> <input type="checkbox" id="subfolder1" />
<ol>
<li class="file"><a href="">Filey 1</a></li>
<li>
<label for="subsubfolder1">Subfolder 1</label> <input type="checkbox" id="subsubfolder1" />
<ol>
<li class="file"><a href="">File 1</a></li>
<li>
<label for="subsubfolder2">Subfolder 1</label> <input type="checkbox" id="subsubfolder2" />
<ol>
<li class="file"><a href="">Subfile 1</a></li>
<li class="file"><a href="">Subfile 2</a></li>
<li class="file"><a href="">Subfile 3</a></li>
<li class="file"><a href="">Subfile 4</a></li>
<li class="file"><a href="">Subfile 5</a></li>
<li class="file"><a href="">Subfile 6</a></li>
</ol>
</li>
</ol>
</li>
<li class="file"><a href="">File 3</a></li>
<li class="file"><a href="">File 4</a></li>
<li class="file"><a href="">File 5</a></li>
<li class="file"><a href="">File 6</a></li>
</ol>
</li>
</ol>
</li>
<li>
<label for="folder2">Folder 2</label> <input type="checkbox" id="folder2" />
<ol>
<li class="file"><a href="">File 1</a></li>
<li>
<label for="subfolder2">Subfolder 1</label> <input type="checkbox" id="subfolder2" />
<ol>
<li class="file"><a href="">Subfile 1</a></li>
<li class="file"><a href="">Subfile 2</a></li>
<li class="file"><a href="">Subfile 3</a></li>
<li class="file"><a href="">Subfile 4</a></li>
<li class="file"><a href="">Subfile 5</a></li>
<li class="file"><a href="">Subfile 6</a></li>
</ol>
</li>
</ol>
</li>
<li>
<label for="folder3">Folder 3</label> <input type="checkbox" id="folder3" />
<ol>
<li class="file"><a href="">File 1</a></li>
<li>
<label for="subfolder3">Subfolder 1</label> <input type="checkbox" id="subfolder3" />
<ol>
<li class="file"><a href="">Subfile 1</a></li>
<li class="file"><a href="">Subfile 2</a></li>
<li class="file"><a href="">Subfile 3</a></li>
<li class="file"><a href="">Subfile 4</a></li>
<li class="file"><a href="">Subfile 5</a></li>
<li class="file"><a href="">Subfile 6</a></li>
</ol>
</li>
</ol>
</li>
<li>
<label for="folder4">Folder 4</label> <input type="checkbox" id="folder4" />
<ol>
<li class="file"><a href="">File 1</a></li>
<li>
<label for="subfolder4">Subfolder 1</label> <input type="checkbox" id="subfolder4" />
<ol>
<li class="file"><a href="">Subfile 1</a></li>
<li class="file"><a href="">Subfile 2</a></li>
<li class="file"><a href="">Subfile 3</a></li>
<li class="file"><a href="">Subfile 4</a></li>
<li class="file"><a href="">Subfile 5</a></li>
<li class="file"><a href="">Subfile 6</a></li>
</ol>
</li>
</ol>
</li>
<li>
<label for="folder5">Folder 5</label> <input type="checkbox" id="folder5" />
<ol>
<li class="file"><a href="">File 1</a></li>
<li>
<label for="subfolder5">Subfolder 1</label> <input type="checkbox" id="subfolder5" />
<ol>
<li class="file"><a href="">Subfile 1</a></li>
<li class="file"><a href="">Subfile 2</a></li>
<li class="file"><a href="">Subfile 3</a></li>
<li class="file"><a href="">Subfile 4</a></li>
<li class="file"><a href="">Subfile 5</a></li>
<li class="file"><a href="">Subfile 6</a></li>
</ol>
</li>
</ol>
</li>
</ol>
CSS Code:
/* CSS Tree menu styles */
ol.tree {
padding: 0 0 0 30px;
width: 300px;
}
li {
position: relative;
margin-left: -15px;
list-style: none;
}
li.file {
margin-left: -1px !important;
}
li.file a {
background: url(/alfresco/images/amys/document.png) 0 0 no-repeat;
padding-left: 21px;
text-decoration: none;
display: block;
}
li.file a[href * '.pdf'] {
background: url(/alfresco/images/amys/document.png) 0 0 no-repeat;
}
li.file a[href * '.html'] {
background: url(/alfresco/images/amys/document.png) 0 0 no-repeat;
}
li.file a[href $ '.css'] {
background: url(/alfresco/images/amys/document.png) 0 0 no-repeat;
}
li.file a[href $ '.js'] {
background: url(/alfresco/images/amys/document.png) 0 0 no-repeat;
}
li input {
position: absolute;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
top: 0;
}
li input + ol {
background: url(/alfresco/images/amys/toggle-small-expand.png) 40px 0 no-repeat;
margin: -0.938em 0 0 -44px;
/* 15px */
height: 1em;
}
li input + ol > li {
display: none;
margin-left: -14px !important;
padding-left: 1px;
}
li label {
background: url(/alfresco/images/amys/folder-horizontal.png) 15px 1px no-repeat;
cursor: pointer;
display: block;
padding-left: 37px;
}
li input:checked + ol {
background: url(/alfresco/images/amys/toggle-small.png) 40px 5px no-repeat;
margin: -1.25em 0 0 -44px;
/* 20px */
padding: 1.563em 0 0 80px;
height: auto;
}
li input:checked + ol > li {
display: block;
margin: 0 0 0.125em;
/* 2px */
}
li input:checked + ol > li:last-child {
margin: 0 0 0.063em;
/* 1px */
}