How to toggle the visibility a div or a label on Click/MouseOver of a link in gridview.

This demonstration is very useful to make a pop up like window opens on click/Mouse Over on every link in a row in a grid view. To begin this lets start with writing the gridview asp code.

<asp:GridView ID="grdreciept" runat="server" AutoGenerateColumns="false" ShowHeader="false" >
      <Columns>
        <asp:TemplateField>
            <ItemTemplate>
             <tr>                                              
            <td align="left" width="330" valign="middle" >
                <a href="#" id="click" class="showhide">View Orders</a>
               <asp:Panel ID="pnlOrders" runat="server" class="slidediv">
                  <ul>
            <li>
                <asp:Label ID="lblOrderDetails"  runat="server"></asp:Label>
                 </li>
            </ul>
              </asp:Panel>
                  </td>                                                                                 
                  </tr>                           
                 </ItemTemplate>
              </asp:TemplateField>
          </Columns>
       </asp:GridView>
    </table> 

Now write the css and the jQuery code.

 <script src="../js/jquery-slide.js" type="text/javascript"></script> 
     // Download the jQuery file.
 <script type="text/javascript">

    $(function () {
        $('.showhide').mouseover(function () {   
      // Use this is for mouseover.
       // $('.showhide').click(function () {           
 // Use this is for click. 

            $(this).closest("tr td").find(".slidediv").slideToggle();
        });
    });

</script>
<style type="text/css">
    .slidediv
    {
        width: 85%;
        padding: 20px;
        color: #fff;
        margin-top: 10px;
        border: 1px solid #313131;
        display: none;
    }
</style>