[jQuery] Re: Chaining of display effects.

[Erik Beeson]

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?