To display a listing with folder icons as in the below screenshot, paste the following code into the "Include external CSS" box on the "HTML" page.
This will also add a limited collapse/expand functionality.
</style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.d0').click(function() { var b = $(this).hasClass('h'); $(this).nextUntil('.d0').toggle(b); if (b) {$(this).removeClass('h')} else {$(this).addClass('h')}; }); $('.d1').click(function(){ var b = $(this).hasClass('h'); $(this).nextUntil('.d1,.d0').toggle(b); if (b) {$(this).removeClass('h')} else {$(this).addClass('h')}; }); $('.d2').click(function(){ var b = $(this).hasClass('h'); $(this).nextUntil('.d2,.d1,.d0').toggle(b); if (b) {$(this).removeClass('h')} else {$(this).addClass('h')}; }); $('.d3').click(function(){ var b = $(this).hasClass('h'); $(this).nextUntil('.d3,.d2,.d1,.d0').toggle(b); if (b) {$(this).removeClass('h')} else {$(this).addClass('h')}; }); $('.d4').click(function(){ var b = $(this).hasClass('h'); $(this).nextUntil('.d4,.d3,.d2,.d1,.d0').toggle(b); if (b) {$(this).removeClass('h')} else {$(this).addClass('h')}; }); $('.d5').click(function(){ var b = $(this).hasClass('h'); $(this).nextUntil('.d5,.d4,.d3,.d2,.d1,.d0').toggle(b); if (b) {$(this).removeClass('h')} else {$(this).addClass('h')}; }); $('.d6').click(function(){ var b = $(this).hasClass('h'); $(this).nextUntil('.d6,.d5,.d4,.d3,.d2,.d1,.d0').toggle(b); if (b) {$(this).removeClass('h')} else {$(this).addClass('h')}; }); $('.d7').click(function(){ var b = $(this).hasClass('h'); $(this).nextUntil('.d7,.d6,.d5,.d4,.d3,.d2,.d1,.d0').toggle(b); if (b) {$(this).removeClass('h')} else {$(this).addClass('h')}; }); $('.d8').click(function(){ var b = $(this).hasClass('h'); $(this).nextUntil('.d8,.d7,.d6,.d5,.d4,.d3,.d2,.d1,.d0').toggle(b); if (b) {$(this).removeClass('h')} else {$(this).addClass('h')}; }); $('.d9').click(function(){ var b = $(this).hasClass('h'); $(this).nextUntil('.d9,.d8,.d7,.d6,.d5,.d4,.d3,.d2,.d1,.d0').toggle(b); if (b) {$(this).removeClass('h')} else {$(this).addClass('h')}; }); }); </script> <style type="text/css"> .d td:first-child { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAACXZwQWcAAAAQAAAAEABcxq3DAAACfElEQVQ4y72TO4hdVRSGv3XOuY9zx0kMg5OLRB1QQoQYiFEQbRIQRBAEQVSw1sJWsLC0Eu21SGFpECRoZREMIr4mgWFCEuOYxEkm83DuzD2vu88+j72XxVyC2CgI+ZvF+hd8fM2C/xn5Z7EABNPDAnDuvwCWP+5z/l0rL3/1xrO9udmTYccPg8BKnd08PTz1/dIvHz3Zm9k/mOn2ZDaKw8QV/bR/ZJmHntvYA1w/8yLq5PD8M8e/HjyYHRaXo1VKuTZazq8HS3gdirp5aOck0h80vu+9bvjwatouEgHE80/g6u0T/bnmsbCX44sMt7uOJvmx+OCRYzIYIN0BQWcGNHitWftuX7Xz2etxfDCLANSVoBaoaNKQerQPPwEZ3s/MoQUIXyIIh7hWsekqfmPxEJ6ub3XPwJebIDZvzQEHw2DwiEGiGPC0VYavtmjKJeqdJXyyTFBe/WOU9tPebDgF1NsEHQpnqrZ7oO1IVACglYF0FdLzSLFN1yRQG2zLb0dfaJqL30wB2ozxEk68mTTBA/tj8Pg8xY03UZNCnSNtgfgSpcX56Fe7Ijz11trUoM0QxGhdVUHUoCbHFzuIM4gatMmhysA3eC+msvK7ayOgIQBwTUFrEoub1LQJasZInUE5RvMdtEjQqsFVYHJ2r66wMf9oB2DPwE4s3hZWq7HVwqH5Jj7fxecp7cRqZbUoTHAryeTS7S359sMv3Oj592sBNAI4+s6bfPDqp9Hbj//ZVDc3sElWmtSuJ4m7vLUrizfWg4s/XpFrX/6kW6l1JagCetdA5BNeeTrK7twYfW5rF6/cchcuXNMrZ3+WO7fHvgDn/uUlwukMgr8t9yZ/AapmbAmS9LD8AAAAKHpUWHRTb2Z0d2FyZQAAeNrzTUwuys9NTclMVHDLLEotzy/KLlawAABgFQgngoM2iwAAAABJRU5ErkJggg=="); background-repeat: no-repeat; } .d0 td:first-child { background-position: 00px 0px; } .d1 td:first-child { background-position: 15px 0px; } .d2 td:first-child { background-position: 30px 0px; } .d3 td:first-child { background-position: 45px 0px; } .d4 td:first-child { background-position: 60px 0px; } .d5 td:first-child { background-position: 75px 0px; } .d6 td:first-child { background-position: 90px 0px; } .d7 td:first-child { background-position: 105px 0px; } .d8 td:first-child { background-position: 120px 0px; } .d9 td:first-child { background-position: 135px 0px; }
Alternatively, load the following HTML style: