19

How can I change the visibility of a control with jQuery? I have a control that its visible property to false (not css).

When I used show() function for it nothing happened, it seems that hide() and show() methods are for css set of a control, not visible property.

peterh
  • 11,875
  • 18
  • 85
  • 108
SilverLight
  • 19,668
  • 65
  • 192
  • 300

4 Answers4

40

You can't do this with jQuery, visible="false" in asp.net means the control isn't rendered into the page. If you want the control to go to the client, you need to do style="display: none;" so it's actually in the HTML, otherwise there's literally nothing for the client to show, since the element wasn't in the HTML your server sent.

If you remove the visible attribute and add the style attribute you can then use jQuery to show it, like this:

$("#elementID").show();

Old Answer (before patrick's catch)

To change visibility, you need to use .css(), like this:

$("#elem").css('visibility', 'visible');

Unless you need to have the element occupy page space though, use display: none; instead of visibility: hidden; in your CSS, then just do:

$("#elem").show();

The .show() and .hide() functions deal with display instead of visibility, like most of the jQuery functions :)

Community
  • 1
  • 1
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • The OP stated "(not css)". I can't imagine what that means, though. – user113716 Jun 11 '10 at 18:29
  • @patrick - Ohhhhh, that's an ASP.Net thing, totally different answer, I'll update. – Nick Craver Jun 11 '10 at 18:30
  • that is very very bad for me ..... imagine that i have two buttons next together and when one of them is invisible (from codebehind)so the other one can fill it's space and this is exactly what i want.... i forced to invisible that button for some conditions and also forced to visible it with jquery and invisible the other one with jquery.... so with css -> hidden control i have white space ... how can i fill it by visible button??? however really really thanks for your attention and your answer// best regards/.... – SilverLight Jun 11 '10 at 22:43
  • @LostLord - That's the part of the answer covering `display`, if you use `display: none;` instead of `visibility: hidden;`, then it won't occupy any space in the page while hidden. – Nick Craver Jun 12 '10 at 20:23
7

.show() and .hide() modify the css display rule. I think you want:

$(selector).css('visibility', 'hidden'); // Hide element
$(selector).css('visibility', 'visible'); // Show element
Harold1983-
  • 3,329
  • 2
  • 23
  • 22
  • that is very very bad for me ..... imagine that i have two buttons next together and when one of them is invisible (from codebehind)so the other one can fill it's space and this is exactly what i want.... i forced to invisible that button for some conditions and also forced to visible it with jquery and invisible the other one with jquery.... so with css -> hidden control i have white space ... how can i fill it by visible button??? however really really thanks for your attention and your answer// best regards/.... – SilverLight Jun 12 '10 at 04:31
1

Here's some code I use to deal with this.

First we show the element, which will typically set the display type to "block" via .show() function, and then set the CSS rule to "visible":

jQuery( '.element' ).show().css( 'visibility', 'visible' );

Or, assuming that the class that is hiding the element is called hidden, such as in Twitter Bootstrap, toggleClass() can be useful:

jQuery( '.element' ).toggleClass( 'hidden' );

Lastly, if you want to chain functions, perhaps with fancy with a fading effect, you can do it like so:

jQuery( '.element' ).css( 'visibility', 'visible' ).fadeIn( 5000 );
Andy
  • 3,141
  • 3
  • 27
  • 22
1

It's been more than 10 years and not sure if anyone still finding this question or answer relevant.

But a quick workaround is just to wrap the asp control within a html container

<div id="myElement" style="display: inline-block">
   <asp:TextBox ID="textBox1" runat="server"></asp:TextBox>
</div>

Whenever the Javascript Event is triggered, if it needs to be an event by the asp control, just wrap the asp control around the div container.

<div id="testG">  
   <asp:Button ID="Button2" runat="server" CssClass="btn" Text="Activate" />
</div>

The jQuery Code is below:

$(document).ready(function () {
    $("#testG").click(function () {
                $("#myElement").css("display", "none");
     });
});
Gary Bao 鲍昱彤
  • 2,608
  • 20
  • 31