[TIP] Add folder icons to HTML listing with indent

Cool configurations, examples, frequently asked questions.
Post Reply
admin
Site Admin
Posts: 321
Joined: Sun May 01, 2005 7:07 pm

[TIP] Add folder icons to HTML listing with indent

Post by admin » Fri Aug 09, 2013 6:47 pm

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.

Code: Select all

</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:
Tree with icon.dlh
(4.25 KiB) Downloaded 696 times
Listing with folder icons.png
Listing with folder icons.png (17.62 KiB) Viewed 10551 times

Post Reply