PopUp - changing form with Jquery effect

[PF2G]

Hi,

I have this popup with a Login Form (and a register form comment):

div id="login" style="float:right; width:15%; padding-top:3px;">
                            <a href="#" class="topopup">LOGIN | REGISTAR</a>

                            <div id="toPopup"> 
                                <div class="close"></div>
                                <div id="popup_content"> <!--your content start-->
                                    <h2>Login</h2>
                                    <form id="login">
                                        <table cellpadding="3" cellspacing="2">
                                            <tr>
                                                <td>
                                                    Username:
                                                </td>
                                                <td>
                                                    <input type="text" name="username" id="username" />
                                                </td>
                                            </tr>

                                            <tr height="10px"></tr>

                                            <tr>
                                                <td>
                                                    Password:
                                                </td>
                                                <td>
                                                    <input type="password" name="password" id="password" />
                                                    <br/>
                                                    <span style="font-size:10px;"><a href="">Esqueceu-se da password?</a></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>

                                                </td>
                                                <td style="text-align:left;">
                                                    <input type="submit" name="login" id="login" />
                                                    <span style="font-size:12px;"><a href="">Ainda não está inscrito?</a></span>
                                                </td>
                                            </tr>
                                        </table>
                                    </form>

                                    <!--
                                    <form id="register">
                                        <table cellpadding="3" cellspacing="2">
                                            <tr>
                                                <td>
                                                    Username:
                                                </td>
                                                <td>
                                                    <input type="text" name="username" id="username" />
                                                </td>
                                            </tr>

                                            <tr height="10px"></tr>

                                            <tr>
                                                <td>
                                                    Password:
                                                </td>
                                                <td>
                                                    <input type="password" name="password" id="password" />
                                                    <br/>
                                                    <span style="font-size:10px;"><a href="#">Esqueceu-se da password?</a></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>

                                                </td>
                                                <td style="text-align:left;">
                                                    <input type="submit" name="login" id="login" />
                                                    <span style="font-size:12px;"><a href="#register">Ainda não está inscrito?</a></span>
                                                </td>
                                            </tr>
                                        </table>
                                    </form>
                                    -->
                                </div> <!--your content end-->
                            </div> <!--toPopup end-->
                            <div class="loader"></div>
                            <div id="backgroundPopup"></div>
                        </div>

What i want is to change with a jquery effect the forms when i click in the anchor link

<span style="font-size:12px;"><a href="#register">Ainda não está inscrito?</a></span>

Can you help me, please?

Thank you

[JorgeM]

Here's one option. Create two links above... a login and register. They can be side by side by doing something like this.

<a href="#" id="loginLink" class="topopup">LOGIN</a> | 
<a href="#" id="registerLink" class="topopup">REGISTAR</a>

Ok, then just add a block of jQuery code to show and hide the appropriate form.

<script>
    $("#loginLink").click(function() {
      $("#login").show();
      $("#register").hide();
    });

    $("#registerLink").click(function() {
      $("#login").hide();
      $("#register").show();
    });
</script>

Note
In your example, you used the id="login" twice.. Line 1 & 8. IDs should be unique. Call the Div in line #1 something else. Also, move in the <h2> Login element within the appropriate form areas, by wrapping each form within their own divs in the event you want to have other elements that are specific to each form area... such as titles, other links, etc...

Oh, also, you may want the one of the forms to be set to display:none upon page load.

[PF2G]

Thank you for replying, i will defenitly try that.

I was thinking of something more complex... What i'm trying to do is something like this http://tympanus.net/Tutorials/AnimatedFormSwitching/ but without closing the popup form...

[JorgeM]

Well, there is a link on that demo page that takes you back to the actual tutorial/instructions on how to build it.