How does one expand/collapse a nested GridView embedded within div element while clicking an ImageButton?

Question

For the following code

<asp:GridView runat="server" ID="gvCustomers" ...
...
 <Columns>
   <asp:TemplateField>
     <HeaderTemplate>
     </HeaderTemplate>
     <ItemTemplate>
       <asp:ImageButton runat="server" ID="ITimgExpand" ImageUrl="~/Images/Common/expand.gif" CommandName="Select" />
     </ItemTemplate>
   </asp:TemplateField>
   ...
   <asp:TemplateField>
     <ItemTemplate>
      </td></tr>
        <tr>
           <td colspan="3">
              <div id="document_<%# Eval("RENTER_ID") %>" style="margin:10; display: none; position: relative">
                  <asp:GridView ID="gvDocuments" runat="server" ...
         ...

How does one expand/collapse div which includes nested GridView while clicking ITimgExpand ImageButton?

Answer 1

Use can use the Jquery hide function to do this.

http://jqueryui.com/demos/hide/#default

Answer 2

Add the following javascript function:

function togglePanel(divId){
  if (document.getElementById){
    var container = document.getElementById(divId);
    if (container.style.display =='none'){
      container.style.display = 'block';    
    }else{
      container.style.display ='none';
    }    
  }
}

Then have your ImageButton call the function passing the ID of the

<asp:imagebutton id="ImgBtn" runat="server" onclientclick="togglePanel('document_<%# Eval("RENTER_ID") %>')" />