[RESOLVED]How to keep DIV from not closing when using Show/Hide?

I’m trying to show/hide a div but upon clicking the show button the DIV only stays open for a few seconds. How come this happening?

Here is the code on WebForm.aspx:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#show").click(function () {
            $("div").show();
        });
        $("#hide").click(function () {
            $("div").hide();
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Literal ID="Literal1" runat="server"></asp:Literal>
    </form>
</body>
</html>

And here is the code in WebForm.aspx.cs:

namespace WebServiceClient
{
    public partial class WebForm11 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            StringBuilder sb = new StringBuilder();

            sb.Append("<button id='show'>Show</button>");
            sb.Append("<button id='hide'>Hide</button>");

            sb.Append("<div style='display:none'>"); // Content to show/hide
            sb.Append("<p>Show this content</p>");
            sb.Append("</div>");

            Literal1.Text = sb.ToString();

        }
    }
}

I would prefer the DIV to stay open until I Click the hide button. How come it automatically closes?

The page is probably refreshing, you need to cancel the button click so the form doesn’t submit

    $(document).ready(function () {
        $("#show").click(function (e) {
           e.preventDefault();
            $("div").show();
        });
        $("#hide").click(function (e) {
           e.preventDefault();
            $("div").hide();
        });
    });

Ohh, sounds reasonable. I didn’t think of that. Still wouldn’t know what to do about it Wink

Superb Cool

That did the trick!!! Thanks!

Leave a Reply