how to invoke server side and client side events in asp web forms - asp.net

Question

within an asp.net webform I have the following code
<asp:UpdatePanel ID="udpNames" runat="server">
<ContentTemplate>
<div class="expanderheaders">
<asp:Image ID="epImgNames" runat="server" ImageAlign="Middle" CssClass="expanderimage" />
<asp:LinkButton ToolTip="Expand Names" ID="lbtnNames" runat="server" OnClick="lbName_Click"
Text="Names" CssClass="detaillinks" />
</div>
<div class="detailsectionBorders">
<ajax:CollapsiblePanelExtender ID="epNames" runat="server" ExpandControlID="lbtnNames"
CollapseControlID="lbtnNames" Collapsed="true" ExpandedSize="420" ScrollContents="true"
ImageControlID="epImgNames" CollapsedImage="~/images/expandwn.png" ExpandedImage="~/images/expanup.png"
TargetControlID="namePanel" CollapsedSize="0" CollapsedText="Names" AutoExpand="false" />
<asp:Panel ID="namePanel" runat="server">
<asp:PlaceHolder runat="server" ID="PlaceHolderNames" />
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
DIV tag expanderheaders is a used as a header to the section. It contains a link button an image similar to a expander panel bar.
CollapsiblePanelExtnder is an ajax toolkit control that expands when a asp.net control is clicked (LinkButton) a user control is then loaded into the PlaceHolder to display a new section of data.
This all works fine but I am currently only able to click on the link button to expand the section (as expected). What I would like to do is have the ability to click on the entire div section (expanderHeaders) and have it serve as the control to expand the section.
I have looked at using jQuery and I have been able to duplicate the panel expansion as well as set the DIV layer to function as desired in accepting a client event and not just on an server side control. However, I have been unsuccessful in being able to invoke a server side method to load the user control when using jQuery.
Can anyone provide some guidance on how to either set the existing control up to where the link button could span the entire content of the div layer or use client side script/ jQuery to allow me to call a server side method to load a user control in the page?
Thanks in advance
update to James answer
I tried something similar to this
jquery
$(function () {
$("#panel").hide();
});
$(document).ready(function () {
$(".slide").click(function () {
$("#panel").show("slow");
});
});
and aspx
<div>
<div id="panel" >
<p>stuff here</p>
</div>
<div class="slide" id="div1" runat="server">
<p class="btn-slide">Expand Panel</p>
</div>
</div>
I'll omit the CSS as it is not that important for now
Using this approach clicking on the div layer seems to causes a postback each time clicked so the codebhind is never accessed.
protected void Page_Load (object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
div1.Attributes["onclick"] = ClientScript.GetPostBackEventReference(this, "ClickDiv");
}
}
protected override void RaisePostBackEvent (IPostBackEventHandler source, string eventArgument)
{
//call the RaisePostBack event
base.RaisePostBackEvent(source, eventArgument);
if (eventArgument.ToUpper() == "CLICKDIV")
{
}
}
still no dice.

Answer 1

It would probably be easier to do this with jQuery:
//obviously, adjust this to your needs
$(document).ready(function(){
$(".expanderheaders").click(function(){
$(".detailsectionBorders").hide("slow");
}
});
To do it server-side, if you give the div an ID and can specify runat="server", you can do something like this:
<div id="div1" runat="server">
Expand Me
</div>
Code-behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
div1.Attributes["onclick"] = ClientScript.GetPostBackEventReference(this, "ClickDiv");
}
}
protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)
{
//call the RaisePostBack event
base.RaisePostBackEvent(source, eventArgument);
if (eventArgument.ToUpper() == "CLICKDIV")
{
//logic here
}
}