.modal switching content in bootstrap4 from bootstrap 3 with JS

[exceedinglife]

Hello all,

I have a bootstrap 3 modal and I want to use bootstrap 4 to make it work the same way. I have tried quiet a few different ways to make this work I am trying to use something like the fadein fadeout and fadetoggle methods but in bootstrap4 they don’t have these. I tried .modal(show) and .modal(toggle) I just need to change the content to the next content

                <p class="text-center"><a href="#" class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#modalLogin">Open Login Modal</a></p>
 <div class="modal fade" id="modalLogin" role="dialog" tabindex="-1" aria-labelledby="ModalLabelScreen" aria-hidden="true" ">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header" align="center">
                        <!-- look for class=img-circle but diff shapes bootstrap-->
                        <img id="bootstrap_logo" class="rounded mx-auto d-block" src="img/bootstrap-4.png" />
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true">&times;</span> <!-- TODO glyphicons >   -->
                        </button>
                    </div>
                    <!-- Building DIV Form -->
                    <div id="div-forms">

                        <!-- Building Login Form -->
                        <form id="formLogin">
                            <div class="modal-body">
                                <div id="loginMsg">
                                    <div id="iconLoginMsg" class="glyphicon glyphicon-chevron-right"></div>
                                    <!--<i class="fas fa-user prefix grey-text"></i>-->
                                    <!--<i class="fab fa-twitter"></i>-->
                                    <span id="textLoginMsg">Enter your Username and Password.</span>
                                </div>
                                <input type="text" id="txtUsername" class="form-control" placeholder="Username (type ERROR for error effect)" required />
                                <input type="password" id="txtPassword" class="form-control" placeholder="Password" required />
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" />Remember me
                                    </label>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div>
                                    <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
                                </div>
                                <div>
                                    <button type="button" id="btnLostPassword" class="btn btn-link">Lost Password?</button>
                                    <button type="button" id="btnRegister" class="btn btn-link">Register</button>
                                </div>
                            </div>
                        </form>
                        <!-- End of Login Form -->
                        <!-- Building Lost Password Form -->
                        <form id="formLost" style="display:none;">
                            <div class="modal-body">
                                <div id="lostMsg">
                                    <div id="iconLostMsg" class="glyphicon glyphicon-chevron-right"></div>
                                    <span id="textLostMsg">Enter your email address.</span>
                                </div>
                                <input type="text" id="txtLostEmail" class="form-control" placeholder="Email (type ERROR for error effect)" required />
                            </div>
                            <div class="modal-footer">
                                <div>
                                    <button type="submit" class="btn btn-primary btn-lg btn-block">Send</button>
                                </div>
                                <div>
                                    <button type="button" id="btnPasswordLogin" class="btn btn-link">Log In</button>
                                    <button type="button" id="btnPasswordRegister" class="btn btn-link">Register</button>
                                </div>
                            </div>
                        </form>
$(function () {
    var $formlogin = $("#formLogin");
    var $formlost = $("#formLost");
    var $formregister = $("#formRegister");
    var $divforms = $("#div-forms");
    var $modalanimatetime = 300;
    var $msganimatetime = 150;
    var $msgshowtime = 2000;

    $("form").submit(function () {
        switch (this.id) {
            case "formLogin":
                var $lusername = $("#txtUsername").val();
                var $lpassword = $("#txtPassword").val();
                if ($lusername == "ERROR") {
                    messageChange($("#loginMsg"), $("#iconLoginMsg"), $("#textLoginMsg"), "error", "glyphicon-remove", "Login error");
                } else {
                    messageChange($("#loginMsg"), $("#iconLoginMsg"), $("#textLoginMsg"), "sucess", "glyphicon-ok", "Login OK");
                }
                return false;
                break;

            case "formLost":
                var $loemail = $("#txtLostEmail").val();
                if ($loemail == "ERROR") {
                    messageChange($("#lostMsg"), $("#iconLostMsg"), $("#textLostMsg"), "error", "glyphicon-remove", "Send error");
                } else {
                    messageChange($("#lostMsg"), $("iconLostMsg"), $("#textLostMsg"), "success", "glyphicon-ok", "Send OK");
                }
                return false;
                break; 
    function modalSwitch($oldForm, $newForm) {
        var $heightOld = $oldForm.height();
        var $heightNew = $newForm.height();
        $divforms.css("height", $heightOld);
        //$oldForm.modal("hide");
        $oldForm.modal("toggle");
        //$newForm.modal("show");
        $newForm.modal("toggle");
    }


    $("#btnRegister").click(function () { modalSwitch($formlogin, $formregister); });//{ modalAnimate($formlogin, $formregister); });
    $("#btnLostPassword").click(function () { modalAnimate($formlogin, $formlost); });
    $("#btnRegisterLogin").click(function () { modalAnimate($formregister, $formlogin); });
    $("#btnRegisterLost").click(function () { modalAnimate($formregister, $formlost); });
    $("#btnPasswordLogin").click(function () { modalAnimate($formlost, $formlogin); });
    $("#btnPasswordRegister").click(function () { modalAnimate($formlost, $formregister); });
    function modalAnimate($oldForm, $newForm) {
        var $heightOld = $oldForm.height();  var $heightNew = $newForm.height();
        $divforms.css("height", $heightOld);
        $oldForm.fadeToggle($modalanimatetime, function() {
            $divforms.animate({ height: $heightNew }, $modalanimatetime, function() {
                $newForm.fadeToggle($modalanimatetime);
            });
        });
    }
    function messageFade($msgId, $msgText) {
        $msgId.fadeOut($msganimatetime, function() {
            $(this).text($msgText).fadeIn($msganimatetime);
        });
    }

    function messageChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $messageText) {
        var $oldMsg = $divTag.text();
        messageFade($textTag, $messageText);
        $divTag.addClass($divClass);
        $iconTag.removeClass("glyphicon-chevron-right");
        $iconTag.addClass($iconClass + " " + $divClass);
        setTimeout(function() {
            //calll
            messageFade($textTag, $oldMsg);
            $divTag.removeClass($divClass);
            $iconTag.addClass("glyphicon-chevron-right");
            $iconTag.removeClass($iconClass + " " + $divClass);
        }, $msgshowtime);
    }