jQuery slideDown slideUP - hide button

I am trying to write a very simple slide up and slide function that hides the buttons after they are pressed, but I have little javascript skill and am surely doing something silly.

What I is not working, is when the user presses Cancel the menu should slide back up and the Show button should reappear. Heres the code

<html>
<head>
  <style>
div {margin:3px; width:130px; height:30px; display:none;}
</style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <button id="show" onclick="this.style.visibility = 'hidden';">Show</button>
<div><input type="text" size="20"/></div>
<div><input type="text" size="20"/></div>
<div><button id="submit">Submit</button> <button id="cancel">Cancel</button></div> 

<script>
// Sliding Menu Down
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
}); 

// Sliding Menu UP [Not Working]
$(document.body).click(function () {
if ($("#cancel").is(":hidden")) {
$("div").slideUp("slow");
} else {
$("#cancel").show();
}
});


</script>
</body>
</html>

Have also, unsuccessfully, tried some variations of:

 $("cancel").click(function () {
 $(this).parent().slideUp("slow", function () {
 $("#msg").text($("cancel", this).text() + " has completed.");
   });
});

I have seen many related issues and resolutions but I cannot figure out the simple slideUp and making the Show button visible on cancel

Solution

Try this:

<html>
<head>
<style>
div.menu {margin:3px; width:130px; height:30px; display:none; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

<script>
$(document).ready(function(){
    $('#show').click(function(){
        $('#show').slideUp('slow', function(){
            $('.menu').slideDown('slow').removeClass('hidden');
        }).addClass('hidden');
    });

    $('#cancel').click(function(){
        $('.menu').slideUp('slow', function(){
            $('#show').slideDown('slow').removeClass('hidden');
        }).addClass('hidden');
    });
})(jQuery);
</script>
</head>
<body>

<button id="show">Show</button>
<div class="menu hidden"><input type="text" size="20"/></div>
<div class="menu hidden"><input type="text" size="20"/></div>
<div class="menu hidden">
    <button id="submit">Submit</button>
    <button id="cancel">Cancel</button>
</div> 

</body>
</html>

Its easy to use:

$('#show').click(function(){...});

is the function if the button Element the ID "show" is clicked

$('#show').slideUp('slow', function(){...}).addClass('hidden');

is first sliding up the Element with the ID "show" and is calling the function afterwards, and then it is adding an "hidden" class to the Element with the ID "show" (if you want to check if its visible or not)

$('.menu').slideDown('slow', function(){ $(this).removeClass('hidden'); });

is sliding Down the Elements with the Class "menu" and is removing the class hidden

The same is for the Function if "cancel" is pressed, only the IDs and Classes are different :)