Question

I am trying to use some show hide functions in my js file:

$(document).ready(function() {
    $('#me').hide();
    $('#send').click(function() {
        $('#me').show("slow");
    });
});

for some reason, when i click the id=”send” button, the id=”me”(a picture)

is not showing up again(though it disappears):

<div id="me">
    <img src="Me.JPG" alt="me" width="450" height="450" alt="picture" align="right"/>
</div>

help please?

please let me know if i have to add more code to make myself clear…

thank you!

EDIT:

here is the code for the send button:

<input type="submit" id="send" value=" Send " class="submit" />

Answer 1

I would say the most likely answer is the send button does not yet exist when your page is loaded. Is this button being created dynamically, or through some other mechanism? To debug, I would say:

   $(document).ready(function() {
     $('#me').hide();
     alert(document.getElementById('send')); //Test if it exists
     $('#send').click(function() {
      $('#me').show("slow");
    });
   });

If you get a popup with null, then you’ll have to track down where this button gets generated and bind the event there.

Other than that, as you can tell from:

jsfiddle.net/zs7W2/

Your code works fine.

UPDATE:

I believe your FORM is actually submitting itself. You should change your code to:

   $(document).ready(function() {
     $('#me').hide();
     $('#send').click(function() {
      $('#me').show("slow");
      return false; //Prevent submit
    });
   });

Or, use a <button type="button"> or <input type="button">

Example: http://jsfiddle.net/zs7W2/7/