Need advice for CSS for the button

Question

I have an asp.net page. There is sidebar in which there are several buttons. There is another button "Edit". Please look at my image:

My question: I don't want the button "Edit" displayed unless a button in the sidebar is clicked. Rightnow it is defaulted show up. My goal is "Edit" doesn't show uncless say click "Problems1" then "Edit" will show up underneath the gridview. My code:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebTest._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="wrap">
 <div id="sidebar">
        <asp:Button ID="p1" runat="server" Text="Problems1" CssClass="sidebar_buttons"
         OnClientClick="Edit_Click()" />
        <asp:Button ID="p2" runat="server" Text="Problems2" CssClass="sidebar_buttons"
             />
        <asp:Button ID="p3" runat="server" Text="Problem3" CssClass="sidebar_buttons" />
        <asp:Button ID="p4" runat="server" Text="Problem4" CssClass="sidebar_buttons" />
        <asp:Button ID="p5" runat="server" Text="Problem5" CssClass="sidebar_buttons" />
        <asp:Button ID="p6" runat="server" Text="Problem6" CssClass="sidebar_buttons" />
        <asp:Button ID="p7" runat="server" Text="Problem7" CssClass="sidebar_buttons" />
    </div>
    <div id="gridview">
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </div>
      <div id="btnEdit" >
        <asp:Button ID="Edit" runat="server"  Text="Edit" /></div>
</div>

And CSS:

#wrap
{
     width: 800px;
     background-color: #99c;
}
#sidebar
{
    float: left;
    width: 125px;
    padding-top:10px;
    background-color: #C0C0C0;
}
#gridview
{
    float: right;
    width: 675px;
}

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

#btnEdit
{
   float: inherit;
}

Answer 1

In the aspx code, set the edit button to visible=false. Go into the properties of the other buttons, go into the events and double click the 'Click' event and place code to make the button visible :)

Hope this helps

Answer 2

first of all hide your edit button by inserting this property in your

#btnEdit
{
   float: inherit;
   display:none; //hide your edit button
}

then call jQuery function on click and show the edit button like

$("#button").click(function(){
     $("#btnEdit").show();
});

Answer 3

first you add display:none; to the css of btnEdit

#btnEdit
{
    display:none;
}

Then you use Jquery to show the btnEdit when the "Problem1Button" is clicked (replace it by the ID of your button)

<script>
$(document).ready(function () {
    $("#Problem1Button").click(function (event) {
    $("#btnEdit").show();            

    });
}
</script>