See also this part
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-2.1.1.min.js"></script>
<style>
.BarMenu {
padding: 7px 10px 6px 10px;
background-color: green;
opacity: .4;
margin-bottom: 2px;
width: 100%;
}
.BarMenu:hover {
opacity: 1;
}
.BarMenuDetails {
padding: 7px 10px 6px 10px;
width: 100%;
background-color: #f6f6f6;
height: 200px;
overflow: auto;
overflow-y: hidden;
display: none;
}
</style>
<script>
$(document).ready(function () {
$("#divControl").click(function () {
$("#divControlDetails").slideToggle(3000);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="width: 20%; float: left;">
<div id="divControl" class="BarMenu">User Controls</div>
<div id="divControlDetails" class="BarMenuDetails">
<div>Test1</div>
<div>Test1</div>
<div>Test1</div>
<asp:treeview id="TreeView1" runat="server" xmlns:asp="#unknown"></asp:treeview>
</div>
<div id="divAdmission" class="BarMenu">Admission</div>
<div id="divAdmissionDetails" class="BarMenuDetails">
<asp:treeview id="TreeView2" runat="server" xmlns:asp="#unknown"></asp:treeview>
</div>
</div>
</div>
</form>
</body>
</html>