javascript - jQuery slideDown slideUP - hide button -


i trying write simple slide , slide function hides buttons after pressed, have little javascript skill , surely doing silly.

what not working, when user presses cancel menu should slide , show button should reappear. heres 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 [not working] $(document.body).click(function () { if ($("#cancel").is(":hidden")) { $("div").slideup("slow"); } else { $("#cancel").show(); } });   </script> </body> </html> 

have also, unsuccessfully, tried variations of:

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

i have seen many related issues , resolutions cannot figure out simple slideup , making show button visible on cancel

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

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

is function if button element id "show" clicked

$('#show').slideup('slow', function(){...}).addclass('hidden'); 

is first sliding element id "show" , calling function afterwards, , adding "hidden" class element id "show" (if want check if visible or not)

$('.menu').slidedown('slow', function(){ $(this).removeclass('hidden'); }); 

is sliding down elements class "menu" , removing class hidden

the same function if "cancel" pressed, ids , classes different :)

i hope helps you..


Comments

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

windows - Python Service Installation - "Could not find PythonClass entry" -

Determine if a XmlNode is empty or null in C#? -