Hi Erik, What you've got here is pretty close, but it would result in the herky- jerky loading of the first form clicked.
Imagine the page loads with both forms invisible (as you can see here: http://cotworld.com/jquery-test/ ). With your code, if Button1 is clicked (for example), Form2 will briefly appear and then slide away - when it should have just remained hidden and Form1 should have slid into view. On Jul 13, 3:28 pm, "Erik Beeson" <[EMAIL PROTECTED]> wrote: > I'm wondering if your description of what you want is a little off. > You say you want to hide form1 if button1 is clicked and form1 is > already visible. But your code looks more like you're trying to hide > form2 if button1 is clicked... If you want the latter, I think it > would be as easy as removing the :visible and :hidden part: > > // Show Form1 > $("#Button1").bind('click', function(){ > // Hide the Form2 if necessary > $("#Form1").slideDown(); > $("#Form2").slideUp(); > > }); > > // Show Form2 > $("#Button2").bind('click', function() { > // Hide Form1 if necessary > $("Form2").slideDown(); > $("Form1").slideUp(); > > }); > > That would result in button1 always showing form1 and hiding form2, > and button2 always showing form2 and hiding form1. Is that what you > want? > > It also sounds like you might considering looking into one of the > various Accordion plugins. > > --Erik > > On 7/12/07, 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?
