Question

I have an asp.net page. There is a button “Edit” on the bottom that is invisible by default. By clicking a button on the left side bar, it is supposed to be shown.
But it is not working, help needed.
Thanks.
Code:

<div id="wrap">
      <div id="header">
    </div>
     <div id="nav">
        <asp:Button ID="Lookup" runat="server" Text="Lookup" CssClass="nav_buttons" ClientIDMode="Static"/>
        <asp:Button ID="Metric" runat="server" Text="Metric" CssClass="nav_buttons" />
    </div>
    <div id="sidebar">
        <asp:Button ID="Button1" runat="server" Text="Button1" ClientIDMode="Static" CssClass="sidebar_buttons"
            OnClick="Button1_Click" />
        <asp:Button ID="Button2" runat="server" Text="Button2" CssClass="sidebar_buttons" />
    </div>
     <div id="sameheight">
        <div id="gridview">
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
                DataSourceID="SqlDataSource1" AutoGenerateEditButton="True" AutoGenerateSelectButton="True" />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                SelectCommand="SELECT * FROM [t1]"></asp:SqlDataSource>
        <asp:GridView ID="GridView2" runat="server" AllowPaging="True" AllowSorting="True"
                AutoGenerateColumns="False" DataKeyNames="sKey" DataSourceID="SqlDataSource2" />
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                SelectCommand="SELECT * FROM [t2]"></asp:SqlDataSource>
        </div>
        <div id="btnEdit">
            <asp:Button ID="Edit" runat="server" ClientIDMode="Static" Text="Edit" OnClientClick="javascript:Edit_Click();return false;" />
        </div>
    </div>
    <script>
        $(document).ready(function () {
            var divone = $("#sidebar").height();
            var divtwo = $("#gridview").height();
            var maxdiv = Math.max(divone, divtwo);
            $("#sidebar").height(maxdiv);
            $("#gridview").height(maxdiv);
        });
         $("#Button1").click(function (event) {
            $("#Edit").show();
        }); 
    </script>
</div>

CSS:

#wrap
{
width: 800px;
background-color: #99c;
overflow: hidden;
}
#header
{
border-style: solid;
border-width: 1px;
background-color: #ddd;
width: 800px;
padding-top: 30px;
padding-bottom: 30px;
}
#sidebar
{
float: left;
width: 125px;
padding-top: 10px;
background-color: #C0C0C0;
}
#nav
{
background-color: #c99;
padding-top: 30px;
padding-bottom: 30px;
width: 800px;
border-style: solid;
border-width: 1px;
}

.sidebar_buttons
{
margin-top: 10px;
margin-left: 2px;
width: 120px;
}

#gridview
{
float: right;
width: 675px;
}

#Edit
{
float: left;
display: none;

}


#sameheight
{
 float: right;
 }

Code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebTest
{
public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        GridView1.Visible = false;
        GridView2.Visible = false;
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
         GridView1.DataBind();
         GridView1.Visible = true;

         GridView2.DataSource = null;
         GridView2.Visible = false;
    }
}

}
Image layout:

Answer 1

Need to reference the ClientID of Button1 to make it accessible in the JavaScript

$("#Button1").click(function (event) { 

Would be

$('#<%= Button1.ClientID %>').click(function (event) {