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
Post a Comment