Maybe by following this can get your desired result $("#Button1").click( function(){ // Hide Form2 if necessary $("#Form2:visible").slideUp(); setTimeout(function(){$ ("#Form1:hidden").slideDown();},1000)
// Don't follow the click return false; }); // Show Form 2 $("#Button2").click( function() { // Hide Form1 if necessary $("#Form1:visible").slideUp(); setTimeout(function(){$ ("#Form2:hidden").slideDown();},1000) // Don't follow the click return false; }); On Jul 13, 10:40 am, navvywavvy <[EMAIL PROTECTED]> wrote: > I've got two forms. When the page loads, both of the forms are hidden > from view with display: none;. > > When Button1 is clicked, I want Form1 to appear. > When Button2 is clicked, I want Form2 to appear. > > If Form1 is visible and Button1 is clicked, I want Form1 to disappear > and THEN I want Form2 to appear. > If Form2 is visible and Button2 is clicked, I want Form2 to disappear > and THEN I want Form2 to appear. > > I can't seem to find a way to make these chain properly. If one of the > forms was visible from the get-go, it could work just fine, but > because in the beginning they're both hidden, it won't work. Here is > my code: > > // Show Form1 > $("#Button1").click( > function(){ > // Hide the Form2 if necessary > $("#Form2:visible").slideUp(); > $("#Form1:hidden").slideDown(); > }); > > // Show Form2 > $("#Button2").click( > function() { > // Hide Form1 if necessary > $("Form1:visible").slideUp(); > $("Form2:hidden").slideDown(); > }); > > Obviously the reason they are not "chaining" is because they're not > chained in the code, but if I did it like this: > > $("Form1:visible").slideUp(function() { > $("Form2:hidden").slideDown(); > > }); > > I would have the problem that I mentioned above where Form2 would only > appear if Form1 was already visible. > > So, how can I make this work?