CODEWITHSUNDEEP
jquery.nethtmlcss
AGuyCalledGerald
AGuyCalledGerald

Reputation: 8150

jquery show not working; visible="false " not working

I have an ASPX-Page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#html-Button").click(function() {
                $(".someClass").show();
            });

            $("#<%= btn.ClientID %>").click(function() {
                $(".someClass").show();
            });

        });

    </script>

</head>
<body>

    <form id="form1" runat="server">

    <div style="visibility:hidden" class="someClass">blabla</div>

    <input id="html-Button" type="button" value="html-Button" />
    <asp:Button runat="server" ID="btn" Text="click me" OnClientClick="return false;" />

    </form>
</body>
</html>

My problems are

Upvotes: 0

Views: 16000

Answers (4)

Town
Town

Reputation: 14906

Visible is an ASP.NET property, you can't apply that to HTML controls unless you add runat="server".

If you want to be able to control the visibility of your div from the server-side, either add runat="server" and provide an ID with which to reference the element, or use the ASP.NET Panel control which renders as a div on the client.

Regarding the visibility problems, change the style of your div to display: none instead of visibility: hidden, that should do the trick.

jQuery show() and hide() amend the display CSS property.

Upvotes: 2

Chris S
Chris S

Reputation: 65436

Try display:none for your DIV's CSS.

Upvotes: 1

Robin Maben
Robin Maben

Reputation: 23054

Yes, I suggest. Try not to add the visibility:hidden attribute.

You can keep it simple with 

$(document).ready(function() {
    $(".someClass").css("display":"none");

    $("#html-Button").click(function() {
        $(".someClass").toggle(); //hides or shows
    });

    $("#<%= btn.ClientID %>").click(function() {
        $(".someClass").toggle();
    });

});

Upvotes: 1

Deele
Deele

Reputation: 3684

.show() and .hide() works with CSS values display: none or display: block, if you want to mess with visibility, then you should .css('visibility','hidden') and stuff...

Read more @jQuery docs

Upvotes: 0

Related Questions