Using hide()/show() with elements I hid 'manually' ?

Question

Hi,

I'd like to prepare a page using jsp, hiding an element in the jsp, then showing it using jquery later on, something like:

// index.jsp:
<%
<div id='hideme' style='hidden: true' >hello</div>
%>

<!-- At runtime: -->
$('#hideme').show();

What's the right way to hide the div in the jsp code such that the jquery hide()/show() methods will work correctly with it later on?

Thanks

Answer 1

Simply use style='display: none' to hide them when rendering and jQuery show/hide will work with your server-side generated hidden elements.

Answer 2

The show() and hide() methods operate on the css display property.

So what you would want is

// index.jsp:
<%
<div id='hideme' style='display:none' >hello</div>
%>

Reference

• http://api.jquery.com/hide/

Answer 3

for your element to work properly use proper css properties

hello

to show

$('#hideme').show('slow');

to hide

$('#hideme').hide('slow');

you can call them in one function or two separate functions respectively