I am trying to display when button is click then another button will be display for this I try this but not working

<div class="rightdiv">
    <div id="BTNONE">
        <asp:Button ID="Button2" runat="server" Text="New Tab" OnClick="Button2_Click" style="display: none;" />
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
    </div>    
</div>

<script type="text/javascript">
    $(function () {
        $("#Button1").on('click', function () {
            $("#BTNONE").show();
        });
    });
</script>

I am trying to display when button is click then another button will be display for this I try this but not working

<div class="rightdiv">
    <div id="BTNONE">
        <asp:Button ID="Button2" runat="server" Text="New Tab" OnClick="Button2_Click" style="display: none;" />
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
    </div>    
</div>

<script type="text/javascript">
    $(function () {
        $("#Button1").on('click', function () {
            $("#BTNONE").show();
        });
    });
</script>

• javascript
• jquery
• button

4 Answers 4

i think your code is work. but i try using html.

$(function () {
        $("#Button1").on('click', function () {
            $("#Button2").show();
        });
    });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rightdiv">
        <div id="BTNONE">
            <button type="button" ID="Button2" value="New Tab" style="display: none;" />
              Button 2
            </button>
            <button ID="Button1" value="Button" />Button 1</button>
        </div>    
    </div>

The #BTNONE div is not hidden - it's the first <button /> within it so, your selector is incorrect.

Also note that when using the runat="server" attribute on an ASP.Net control means that you cannot necessarily rely on the ID attribute being the same when the control is rendered on the client.

With that in mind, try this:

$("#BTNONE button:eq(1)").on('click', function () {
    $("#BTNONE button:eq(0)").show();
});

your hidden button id isbutton2

<script type="text/javascript">
    $(function () {
        $("#Button1").on('click', function () {
            $("#Button2").show();
        });
    });
</script>

$(function () {
        $("#Button1").on('click', function () {
            $("#Button2").show();
        });
    });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rightdiv">
        <div id="BTNONE">
            <button type="button" ID="Button2" value="New Tab" style="display: none;" />
              Button 2
            </button>
            <button ID="Button1" value="Button" />Button 1</button>
        </div>    
    </div>