Jquery toggle form using if else statement

Updated on ... 10th February 2023

In this tutorial, we created a custom jQuery toggle form using the if else statement it’s awesome jQuery toggle functionality

This tutorial is very helpful if you want to add an image, HTML form, and button and you want to show any product then it’s very helpful.

In this article, we will create a toggle form in the below simple steps

Step 01: Create HTML toggle div
Step 02: we will write some custom CSS
Step 03: we create jquery functionality

It is onload slide form.

Tree directory structure script With PHP

Step 01: Create HTML toggle div

First of all, I create an HTML structure. it's a very simple way. be sure to include font awesome and jquery library

                                                
                                                
                                                <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>

Step 02: we will write some custom CSS

Its Ossam Custom style CSS In this article we will create a CSS keyframe

                                                
                                                
                                                /* 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;
}

Step 03: we create jquery functionality

we create a jquery if else statement.

                                                
                                                
                                                $(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;
        }

    });
});