Jquery toggle form using if else statement

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

<div class="wrapper_new">
    <div class="box_wrap">
        <div id="slide">
            <a href="https://bootstrapfriendly.com/"><img src="https://picsum.photos/seed/picsum/200/300" /></a>
            <span id="flash_poup_open_close">
                <i class="fa fa-window-close" aria-hidden="true"></i>
            </span>

            <h5><a href="img/azadi-ka-book.jpg">Lorem Ipsome Dolor Site Amet</a></h5>
            <div class="btn_ankr">
            <a href="https://bootstrapfriendly.com/">Learn More</a>
            </div>
        </div>
    </div>
</div>

/* slide */
.wrapper_new {
    position: fixed;
    bottom: 0;
    overflow: hidden;
    width: 180px;
    height: auto;
	z-index: 9999;
}

.wrapper_new .box_wrap #slide {
    position: relative;
    left: -600px;
    height: auto;
    background: #ebebeb;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
    z-index: 999;
    padding: 25px;
}

.wrapper_new.intro-new {
    position: fixed;
    left: -160px;
    bottom: 0;
    transition: all ease-in 0.9s;
}
div#slide i.fas.fa-angle-right {
    background-color: #0058d9;
    padding: 0 5px;
    border-radius: 2px;
    color: #fff;
}
.wrapper_new.intro-new div#slide {
    background: transparent;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}
/*
#flash_poup_open_close i{

} */
.box_wrap #flash_poup_open_close i {
    position: absolute;
    right: 0;
    z-index: 1111;
    font-size: 20px;
    top: 0;
	cursor: pointer;
	color: #e31e24;
}
div#slide img {
    width: 100%;
}
.btn_ankr a {
    background-color: #f34f4e;
    padding: 4px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    margin: 0 auto;
    display: table;
    margin-top: 15px;
    border-radius: 7px;

}
div#slide h5 a {
    display: block;
    font-size: 11px;
    line-height: 14px;
    margin-top: 12px;
	text-align:center;
}

$(document).ready(function(){
    var open;
    $('#flash_poup_open_close').click(function(){
        //$('.wrapper_new').toggle("intro-new");
        // $('.wrapper_new').toggleClass("intro-new");
        // 	$(this).html('<i class="fas fa-angle-right"></i>');
        // });



        if(open){
            $('.wrapper_new').removeClass("intro-new");
            $("#flash_poup_open_close").html('<i class="fa fa-window-close" aria-hidden="true"></i>');
            //console.log('oepn');
             open = false;
        }else{
            $('.wrapper_new').addClass("intro-new");
            $("#flash_poup_open_close").html('<i class="fas fa-angle-right"></i>');
            //console.log('close');
             open = true;
        }

    });
});