Expandable Gridview inside ASP Panel - asp.net

Question

I want to add an expandable asp grid inside an ASP Panel which I want to make visible/invisible by changing the visible true/false option of the panel.
If I remove asp:Panel ID="test1", the site opens with the exandable gridview working no problem.
Once I've add the code inside the panel I get an error message:
Expression expected.
Source Error:
Line 46: <a href="JavaScript:divexpandcollapse('div<%# Eval("reporting_group") %>');">
Would anyone could explain why it this happening and how to avoid it. I have tried also Ajax TabContainer with the same result.
See code below.
<script language="javascript" type="text/javascript">
function divexpandcollapse(divname) {
var div = document.getElementById(divname);
var img = document.getElementById('img' + divname);
if (div.style.display == "none") {
div.style.display = "block"; img.src = "Images/Icons/minus.jpg";
} else { div.style.display = "none"; img.src = "Images/Icons/plus.jpg"; }
}</script>
<asp:Panel ID="test1" runat="server">
Panel 1<br />
<asp:UpdatePanel ID="UP_TabContainer" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GV_SL" runat="server" AutoGenerateColumns="False"
DataSourceID="SQL_Weekly" OnRowCommand="GV_SL_RowCommand"
OnRowDataBound="gvUserInfo_RowDataBound">
<Columns>
<asp:TemplateField ItemStyle-Width="50px">
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div<%# Eval("reporting_group") %>');">
<img id="imgdiv<%# Eval("reporting_group") %>" width="15px" border="0" src="Images/Icons/plus.jpg" />
</a>
</ItemTemplate><ItemStyle Width="40px" />
</asp:TemplateField>
<asp:BoundField DataField="name" HeaderText="Group" SortExpression="name" />
<asp:BoundField DataField="ASL" HeaderText="SL% Act" ReadOnly="True" />
<asp:TemplateField>
<ItemTemplate>
<tr>
<td >
<div ID='div<%# Eval("reporting_group") %>' style="display: none; position: relative;
left: 15px; overflow: auto">
<asp:GridView ID="gvChildGrid" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Metric"
HeaderText=" "/>
<asp:BoundField DataField="Actual" HeaderText="Actual" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:SqlDataSource ID="SQL_Weekly" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand=" SQL QUERY" <SelectParameters>
</SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SQL_Group" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand=" SQL QUERY" ></asp:SqlDataSource>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DateSelection"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<br />
</asp:Panel>

Answer 1

try changing the way your link triggers JavaScript to something like this:
<a href="#" onclick="divexpandcollapse('div<%# Eval("reporting_group") %>');return false;">
<img id="imgdiv<%# Eval("reporting_group") %>" width="15px" border="0" src="Images/Icons/plus.jpg" />
</a>
Note:
use " instead of " (fixes compilation error)
set the link href to "#"
use the onclick event to execute JavaScript (good practice)
.

Answer 2

I think you're conflicting an update panel with client side JavaScript.
If you're using the update panel, why not just change the <a href to a asp:LinkButton control and toggle the visibility on the click event of that object.