[FIXED] Why isn't Jquery giving the <divs> the collapsed class when the anchors are clicked on?

Issue

I'm making a login/register webpage and would like to alternate between both when you either click on Register or Login anchors. To do so I'm using Jquery and I cannot figure out the reason why it doesn't run the function. I have organised the login and register with the <div id="register" or id="login". The goal is to use the class called collapsed to not display one of the two. If you need any more info that I have forgotten to add please comment.

$(document).ready(function() {

    $("div #register").addClass('collapsed');
    
    $('#form a').click(function(event) {

        event.preventDefault();
        $(event.target).parent().parent().parent().addClass('collapsed');
        $(event.target).parent().parent().parent().siblings().removeClass('collapsed');

        document.title = $(event.target).attr('id');
    });
});

.collapsed {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form">
            <div id="register" class="">
                <h2>Register</h2>
                <form action="login_register.php" method="post">
                    <span>Have an account? <a id="Login" class="change" href="#login" >Login</a></span><br>
                    <div id="half-left" class="textbox">
                        <input type="text" placeholder="First Name" name="firstname" required autocomplete="off">
                    </div>
                    <div id="half-right" class="textbox">
                        <input type="text" placeholder="Last Name" name="lastname" required autocomplete="off">
                    </div>
                    <div class="textbox">
                        <input type="text" placeholder="Email" name="email" required autocomplete="off">
                    </div>
                    <div class="textbox">
                        <input type="password" placeholder="Password" name="password" required autocomplete="off">
                    </div>
                </form>
            </div>
            <div id="login" class="">
                <h2>Login</h2>
                <form action="login_register.php" method="post">
                    <span>Don't have an account? <a id="Register" class="change" href="#register" >Register</a></span><br>
                    <div class="textbox">
                        <input type="text" placeholder="Email" name="email" required autocomplete="off">
                    </div>
                    <div class="textbox">
                        <input type="password" placeholder="Password" name="password" required autocomplete="off">
                    </div>
                    <span class="password">Forgot <a href="#">password?</a></span>
                </form>
            </div>
        </div>

Solution

Needed an older version of Jquery for it to work on Dreamweaver.

The code worked fine.

Here is an older version that should work: jQuery actions (in general) not working -Dreamweaver

Answered By - IronExcavater

Answer Checked By - David Marino (PHPFixing Volunteer)