CODEWITHSUNDEEP
javascriptjqueryslidedownslideup
JB.
JB.

Reputation: 913

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

Upvotes: 1

Views: 4744

Answers (2)

ahmet2106
ahmet2106

Reputation: 5007

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 :)

Upvotes: 2

FatherStorm
FatherStorm

Reputation: 7183

where to start. first. give all your DIVs ID's so you can access them directly. second. to reference the cancel button you want $('#cancel') a "#" before a word means "The ELEMENT with this ID" a "." means "The ELEMENT(s)" with this class"

also are you sure you mean to do $("div").slideDown("medium"); and the similar? that means do that action to ALL DIV elements

      <button id="show" style="display:block;">Show</button>
<div class='inputs' style='display:none;'>
    <div><input type="text" size="20"/></div>
    <div><input type="text" size="20"/></div>
    <div><button id="submit" class='formDone'>Submit</button> <button id="cancel"  class='formDone'>Cancel</button></div> 
</div>

<script>
$(document).ready(function(){
  $('#show').live('click',function(){//show the form on request
    $(this).hide();
    $('.inputs').show();
  });
  $('.formDone').live('click',function(){//hide the form on submit of cancel
    //use a AJAX method to submit your form maybe here???
    $('#show').show();
    $('.inputs').hide();
  });

});

</script>

Upvotes: 1

Related Questions