CSS Tree Line Example

HTML

<script src="http://rawgithub.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<!DOCTYPE html>

<html>
<head>
    <title>Tree line test</title>
</head>

<body>
    <ul class="flist showlines">
        <li id="a1">
            <a href="#">Line 1</a>
            <ul>
                <li id="b1"><a href="#">Bline1</a></li>
                <li id="b2"><a href="#">Bline2</a></li>
                <li id="b3">
                    <a href="#">Bline3</a>
                    <ul>
                        <li id="e1"><a href="#">Eline1</a></li>
                        <li id="e2"><a href="#">Eline2</a></li>
                        <li id="e3"><a href="#">Eline3</a></li>
                    </ul>
                </li>
            </ul>
        
        <li id="a2"><a href="#">Line 2</a></li>

        <li id="a3">
            <a href="#">Line 3</a>
            <ul>
                <li id="c1"><a href="#">Cline1</a></li>
                <li id="c2"><a href="#">Cline2</a></li>
                <li id="c3"><a href="#">Cline3</a></li>
            </ul>
        </li>

        <li id="a4"><a href="#">Line 4</a></li>

        <li id="a5">
            <a href="#">Line 5</a>
            <ul>
                <li id="d1"><a href="#">Dline1</a></li>
                <li id="d2"><a href="#">Dline2</a></li>
                <li id="d3"><a href="#">Dline3</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

CSS

body{background-color:#333}

ol, ul {
  list-style: none;
}

.flist {
  margin: 0 0 1em 0;
  padding: 0 0 0 .5em;
  list-style: none;
}

.flist ul {
  margin: 0 0 0 1em;
  padding: 0;
}

.flist li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  line-height: 1.2em;
  font-size: 1em;
}

.flist a {
  text-decoration: none;
  display: block;
  zoom: 1;
  *display: inline;
  padding: .2em .5em .2em 1.4em;
  color: #cccccc;
}

.flist a:hover {
  color: #2222ff !important;
  background-color: #cccccc;
}

.flist a .nmsicon {
  font-size: 0.85em;
  vertical-align: 0;
}

.flist .list-icon {
  display: inline;
  float: left;
  clear: left;
  font-family: NmsIcons;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
  line-height: 1.4em;
  margin: 0;
  padding: .2em .2em;
  width: .4em;
  cursor: default;
}

.flist .list-icon span {
  font-size: 0.7em;
}

/* The showlines class does what it sounds like: shows the lines. */
.flist.showlines {
  overflow-x: visible;
  padding: 0 0 0 1em;
}

.flist.showlines ul {
  margin: 0 0 0 1.9em;
  overflow-x: visible;
}

/* One requirement for this to work is to have support for multiple backgrounds 
   and the background-size property */
.flist.showlines li {
  padding: 0;
  background: url('http://www.isochronous.org/fiddles/flist/pixel.png') 0 0 no-repeat
        , url('http://www.isochronous.org/fiddles/flist/pixel.png') 1px 12px no-repeat;
  /* The image itself is only a 1x1px square, but using background-size we can stretch it
     to any dimensions we want */
  background-size: 1px 100%, 12px 1px;
  overflow: visible;
}

/* The last child needs to be shaped like an 'L', so make one horizontal line and one vertical
   line, then offset the horizontal line so that it intersects the vertical line at its bottom */
.flist.showlines li:last-child {
  background-size: 1px 12px, 12px 1px;
  background-position: 0 0, 1px 12px;
}

/* The First child needs to be shaped like an upside-down...

JavaScript

/// <reference path="../../jquery.cookie.js" />
// Please note that NONE OF THIS IS NECESSARY for the lines to show up,
// rather it's just so they're collapsible and will remember their state
// between page loads.
(function ($, window, undefined) {

    var _, win, elements;

    win = $(window);

    elements = $(".flist");        

    _ = {
        verbose: false,

        getOpenIDsForList: function (list) {
            /// <summary>Returns the string array of open id's from a cookie.</summary>
            var openIDs = list.data("openIDs");
            var listID = list.attr("id");

            if (!openIDs) {
                openIDs = $.cookie("flist_" + listID);

                if (openIDs != null) {
                    try {
                        openIDs = JSON.parse(openIDs) || [];
                    } catch (e) {
                        if (_.verbose === true) {
                            console.warn("flist enhancment: openIDs parse failed. Error: %o", e);
                        }
                        openIDs = [];
                    }
                } else {
                    openIDs = [];
                }
            }
            return openIDs;
        },

        setOpenIDsForList: function (list, ids) {
            /// <summary>Saves the string array of open id's to a cookie.</summary>
            var listID = list.attr("id");
            list.data("openIDs", ids);
            $.cookie("flist_" + listID, JSON.stringify(ids), { path: "/" });
            // leaving expires not set for a 'session' cookie
        },

        addIcons: function (list) {
            /// <summary>Add the arrows to each item that contains a list</summary>
            var childLists = list.find("ul");
            $.each(childLists, function (index, childList) {
                var parentLi, icon, iconType, spn;

                childList = $(childList);
                parentLi = childList.closest("li");
                iconType = childList.is(":visible")...