Content Comparison

...

The basic structure of a tree, as far as rendering is concerned, is a nested set of <ul> and <li> items. The <ul> part represents the children of a list node; the <li> represents an entire child node and its (optional) children. So the basicv structure of the tree is as follows:

<ul>
  <li>
    <div class="ui-tree3-fbtn">-</div>
	<span class="label">Root item 1<span>
	<ul>
		<li>
            <div class="ui-tree3-fbtn">+</div>
			<span class="label">Leaf item 1.1</span>
		</li>
	</ul>	
  </li>
</ul>

...

The brown part is the <ul>, which is contained in the higher level's li (the green part).

The expand/fold buttons

These are made from a div which has either a + or a - inside, depending on the folding state. They also change a css class: ui-tree3-opened or ui-tree3-closed depending on the state of the node they belong to. They are rendered as follows:

// Fold/unfold button
.ui-tree3-fbtn {
	background: #000;
	color: #fff;
	position: relative;
	z-index: 1;
	float: left;
	margin: 0 1em 0 -2em;
	width: 1em;
	height: 1em;
	border-radius: 1em;
	content: '+';
	text-align: center;
	line-height: .9em;
}

The z-index makes sure that the thing falls "over" any horizontal or vertical branch line that is being rendered as a border on some parts. The negative margin ensures we have place for the item before the actual label is shown.

Branch lines

The vertical lines between items at the same level are defined as a generated :before class on the <li>, see the blue line:

...