<!--
Doing a typical display=none/block pushes the first TD's (sidebar) position to the right by 50-60px. This fix avoids the jump by applying 2 workarounds -
1. setting width via attribute instead of element.style.width
2. delivering different display properties to chrome/safari & everyone else
-->

<script type="text/javascript">
function toggleNavTree() {
	var td1 = document.getElementById('treenavtd');
	var td2 = document.getElementById('contenttd');

	if (td1.className == 'treenavtd-hide') {
		td1.className = 'treenavtd-show'; //  Avoid JS style.display & it's css specificity
		td1.setAttribute("width","18%"); // Seems TDs don't like style.Width (offset?)
		td2.setAttribute("width","82%"); // Instead TDs want all their Attributes
	}
	else {
		td1.className = 'treenavtd-hide';
		td1.setAttribute("width","0%"); // Helps in recalculating Table width :|
		td2.setAttribute("width","100%");
	}
}
</script>

<style type="text/css">
//  Avoid JS style.display & it's css specificity
.treenavtd-hide {
display: none;
}

// Only Chrome since other browsers break with this
body:nth-of-type(1) .treenavtd-show{
display: table-cell;
}

// All browsers except Chrome need this
.treenavtd-show {
display: inline;
}
</style>

<table width="99%" colspan="0" cellpadding="0" border="0">
<tr>
	<td colspan="2"><a href="javascript:toggleNavTree()">Show/Hide</a></td>
</tr>
<tr>
	<td id="treenavtd" class="treenavtd-show" valign="top" align="left" width="18%">
		sidebar comes here
	</td>
	<td id="contenttd" valign="top" align="left" width="82%">
		content area comes here
	</td>
</tr>
</table>