jquery accordion is causing jquery treeview picker to breakup

Hi all
i am trying to implement an accordion type interface with jquery found here . inside the accordion i have a jquery treeview picker thats sort of a combo box that opens up a tree structure found here.

my problem is that when i open the treeviewpicker, the options are shown at the bottom of the accordion. a picture of this is shown below

picture

how can i fix this ? any ideas?
thanks!!!

my code is given below:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

$("#accordion").accordion();
				
			});
			/*
			$(document).ready(function(){
				$("#browser").treeview({
					persist: "location",
					collapsed: true,
					animated: "fast",
					persist: "cookie",
					unique: true
				});
				}

);
			*/
			
			$(document).ready(function() {
			$("#browser").treeview({
				persist: "location",
				collapsed: true,
				unique: true
			});
			$("#input_browser").treeviewpicker("#browser_data",
					{ onItemSelect: 
						function selectItem(data) {
							$('#code_browser').attr('value', data); 
						},
						imageUrl: "../images/arrow.jpg"
					});
		});
			
		</script>

</head>
<body>
<h2 align="center">Create Proposed Project</h2>

<br>
<br>
<br>
<br>
<div class="demo">
<div id="accordion">
<h3><a >Description</a></h3>
<div>

Project level <input id="code_browser" readonly /> <input id="input_browser" class="tv_input" readonly />

<ul id="browser">
		<li> <span code="1">Programme 1</span> 
			<ul>
				<li> <span code="1.1">Project 1</span> 
					<ul>
						<li> <span code = "1.1.1">Subproject 1 </span> 
							<ul>
								<li> <span code="1.1.1.1"> Activity 1</span> </li>
								<li> <span code="1.1.1.2"> Activity 2</span> </li>
								<li> <span code="1.1.1.3"> Activity 3</span> </li>
							</ul>
						</li>
							
						<li> <span code="1.1.2">Subproject 2</span> </li>
					</ul>
				</li>
				
				<li> <span code="1.2"> Project 2 </span> </li>
				<li>  <span code="1.3"> Project 3 </span></li>
			</ul>
		</li>
		<li> <span code="2">Programme 2</span></li>
		<li><span code="3">Programme 3</span></li>
	</ul>

</div>

<table>

<tr>

<tr>
<td>Branch/Department</td>
<td> <select>
<option>Social</option>
<option>Rural</option>
</select> </td>
</tr>
</table>

</tr>	
 <tr>
 <td>Description</td>
 <td><input type="text"></td>
 </tr>
 
 <tr>
 <td>Proposal Required</td>
 <td> YES/ NO</td>
 </tr>
 <tr>
 <td>Project Charter Code:</td>
 <td><input type="text" value="2.2" disabled="disabled"></td>
 </tr>
 
</table>

</div>

</table>
<p>
<input type="button" value="Add">
<input type="button" value="Delete">
</p>

</div>
<h3><a >Indicators</a></h3>
<div>

<table>

<tr>
<td></td>
<td>Indicator Description </td>
<td> <input type="text"> </td>
<td> Type </td>
<td> <input type="text"> </td>
</tr>

<tr>
<td> <input type="radio"> </td>
<td> Number of Beneficiary
 </td>
 
<td> <input type="text"> </td>
<td> Quantitative
 </td>
 <td> <input type="text"> </td>
</tr>
<tr>
<td> <input type="radio"> </td>
<td> Minimum Wage of beneficiary below 100 per day
</td>
<td> <input type="text"> </td>
<td> Qualitative </td>
<td> <input type="text"> </td>

</tr>
<tr>
	<td> <input type="button" value="Add"> </td>
	<td> <input type="button" value="Delete"> </td>
</tr>

</table>

</div>
<h3><a >Finance</a></h3>
<div>

</div>
<h3><a >Approval History</a></h3>
<div>

<table>
<tr>
<td>Divisional Secretories Approval
</td>
</tr>
<tr>
<td></td>
<td>Approval:
</td>
<td> Yes <input type="radio" value="Yes">  No <input type="radio" value="No"> </td>
</tr>
<tr>
<td></td>
<td>Remarks: </td>
<td> <input type="text"> </td>
</tr>

<tr>
<td>Director's Approval

</td>
</tr>

<tr>
<td></td>
<td>Approval:
</td>
<td> Yes <input type="radio" value="Yes">  No <input type="radio" value="No"> </td>
</tr>
<tr>
<td></td>
<td>Remarks: </td>
<td> <input type="text"> </td>
</tr>

<tr>
<td>Director General's Approval
</td>
</tr>

<tr>
<td></td>
<td>Approval:
</td>
<td> Yes <input type="radio" value="Yes">  No <input type="radio" value="No"> </td>
</tr>
<tr>
<td></td>
<td>Remarks: </td>
<td> <input type="text"> </td>
</tr>

</table>

</div>
</div>

</div>

</body>
</html>