Tree Form

by consultcory

HTML

<!--
<h3>Deal &amp; Servicing</h3>
-->

<ul class="tree" id="uxBD_Misc">
    <li class="heading">
        <label>General/Miscellaneous</label>
        <ul>
            <li>
                <input type="checkbox" id="ux_BD_IsTrustAgreementEnabled" name="ux_BD_IsTrustAgreementEnabled" />
                <label for="ux_BD_IsTrustAgreementEnabled">Trust Agreement</label>
                <ul>
                    <li class="field">
                        <label for="uxBD_TrustAgreementOrganizationName">Organization</label>
                        <input type="text" id="uxBD_TrustAgreementOrganizationName" name="uxBD_TrustAgreementOrganizationName" size="40" maxlength="500" readonly="readonly" />
                        <input type="hidden" id="uxBD_TrustAgreementOrganizationId" name="uxBD_TrustAgreementOrganizationId" />
                    </li>
                </ul>
            </li>
            <li>
                <input type="checkbox" id="ux_BD_IsSecurityDepositEnabled" name="ux_BD_IsSecurityDepositEnabled" />
                <label for="ux_BD_IsSecurityDepositEnabled">Security Deposit</label>
                <ul>
                    <li class="field">
                        <label for="uxBD_SecurityDepositOrganizationName">Organization</label>
                        <input type="text" id="uxBD_SecurityDepositOrganizationName" name="uxBD_SecurityDepositOrganizationName" size="40" maxlength="500" readonly="readonly" />
                        <input type="hidden" id="uxBD_SecurityDepositOrganizationId" name="uxBD_SecurityDepositOrganizationId" />
                    </li>
                    <li>
                        <input type="radio" id="uxBD_IsSecurityDepositIncluded" name="uxBD_SecurityDepositInclusion" />
                        <label for="uxBD_IsSecurityDepositIncluded">Included in Final Pricing</label>
                        <ul>
                            <li class="field">
                                <label class="inline">Amount ($)</label>
...

CSS

body {
    font-size: 12px;
    font-family: Tahoma, sans-serif;
    background: #fff;
}
ul.tree li.heading > label {
    margin: 0;
    font-size: 1.05em;
    font-weight: bold;
}
ul.tree li.heading > ul {
    padding-top: 3px;
}
ul.tree li:before,
ul.tree li:after {
    content: "";
    display: table;
} 
ul.tree li:after {
    clear: both;
}
ul.tree li {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

ul.tree {
    font-size: 1.0em;   
    margin: 0 0 0 0px;
}
ul.tree, ul.tree ul {
    list-style-type: none;
    padding: 0;
}
ul.tree ul {
    background: transparent url('http://odyniec.net/articles/turning-lists-into-trees/vline.png') repeat-y;
}
ul.tree ul {
    margin-left: 10px;
}
ul.tree li {
    padding: 0 12px;
    margin: 0;
    background: transparent url('http://odyniec.net/articles/turning-lists-into-trees/node.png') no-repeat;
    line-height: 20px;
}
ul.tree li.heading {
    padding-left: 0;
    background: none;
}
ul.tree li.last {
    background: #fff url('http://odyniec.net/articles/turning-lists-into-trees/lastnode.png') no-repeat;
}
ul.tree li > label {
    font-weight: normal;
    text-align: left;
}
ul.tree li.field label {
    font-weight: normal;
    display: block;
    text-align: left;
    width: 202px;
    border-bottom: 1px dotted #ccc;
    float: left;
    position: relative;
}
ul.tree li.heading ul li ul li.field label {
    width: 180px;
}
ul.tree li.heading ul li ul li ul li.field label {
    width: 158px;
}
ul.tree li.heading ul li ul li ul li ul li.field label {
    width: 136px;
}
ul.tree li > label.selected {
    font-weight: bold;
}
ul.tree li.field label:after {
    content:':'
}

JavaScript

;(function ($, undefined) {
    $.widget("efc.checkboxAccordion", {
        options: {
            selectors: [
                '>input[type="checkbox"]:first',
                '>input[type="radio"]:first'
            ]
        },
        _create: function () {},
        _init: function () {
            var $self = this;
            var selectors = this.options.selectors.join(',');
            $(this.element).find('li:last-child').addClass(function() {
                  if (!$(this).hasClass('heading'))
                      $(this).addClass('last');
            });
            $(this.element).find('li').each(function (i, v) {
                var li = $(this);
                var cb = li.find(selectors)[0];
                if (cb) {
                    $self.handleChange(li, cb, false);
                    if ($self.isRadio(cb)) {
                        $(cb).bind('deselect', function () {
                            $self.handleChange(li, this, true);
                        });
                    }
                    $(cb).change(function () {
                        $self.handleChange(li, this, true);
                        if ($self.isRadio(this)) {
                            $('input[name="' + $(this).attr('name') + '"]')
                                .not($(this))
                                .trigger('deselect');
                        }
                    });
                }
            });
        },
        destroy: function () {
            var $self = this;
            var selectors = this.options.selectors.join(',');
            $(this.element).find('li:last-child').removeClass('last');
            $(this.element).find('li').each(function (i, v) {
                var li = $(this);
                li.find('>ul').show();
                var cb = li.find(selectors)
                    .unbind('change')
                    .unbind('deselect');
            });
            $.Widget.prototype.destroy.call(this);
        },
        isRadio:...