Take animation from the button and leave only the ZIP code field visible

Question

I have a difficulty in which I can not solve... I do not understand much of Javascript and so I decided to ask.

I am editing this site in HTML: https://artnaweb.com.br/pediragua/

And I want to take the animation from the "Delivery Service" box and leave only the email field.

Follows the code:

$(function() {
 $(".form-button").click(function(t) {
     if (!$(this).hasClass("active")) {
         var i = $(this).hasClass("full-width"),
             s = $(this).outerWidth();
         i && (s = $(this).parent().width());
         var n = $(this).find(".input"),
             a = s - $(this).find(".icon").outerWidth() - $(this).find(".submit").outerWidth() - (n.outerWidth() - n.width());
         i ? n.animate({
             width: a
         }) : n.css("width", a), n.css("display", "inline-block"), $(this).addClass("active"), n.focus()
     }
 }), $(document).click(function(t) {
     $(t.target).hasClass("form-button") || $(t.target).parents().is(".form-button") || $.each($(".form-button.auto-close.active"), function() {
         var t = $(this).find(".input");
         t.css({
             width: 0,
             display: "none"
         }), $(this).removeClass("active")
     })
 })
 });

  body {
margin:0;
padding:0;
min-width:320px;
background:#eee;
font-family:Montserrat,sans-serif;
font-weight:400;
}

form {
max-width:500px;
margin:0 auto;
}

form .row {
margin:10px 0;
}

form h2 {
margin:50px 0 30px;
color:#333;
text-transform:uppercase;
}

form h2 small {
display:block;
margin-top:5px;
color:#999;
font-weight:400;
font-size:14px;
}

.form-button {
vertical-align:top;
white-space:nowrap;
overflow:hidden;
font-size:0;
border-radius:6px;
color:#fff;
display:inline-block;
cursor:pointer;
}

.form-button button.input,.form-button button.submit,.form-button input.input,.form-button input.submit,.form-button label.input,.form-button label.submit,.form-button.active .cta .text {
display:none;
}

.form-button.red {
background:#E74C3C;
}

.form-button.red .submit:hover,.form-button.red:hover {
background:#D64541;
}

.form-button.red .input,.form-button.red .submit,.form-button.red.active {
color:#D64541;
}

.form-button.blue {
background:#22A7F0;
}

.form-button.blue .submit:hover,.form-button.blue:hover {
background:#3498DB;
}

.form-button.blue .input,.form-button.blue .submit,.form-button.blue.active {
color:#3498DB;
}

.form-button.green {
background:#00aae6;
}

.form-button.green .submit:hover,.form-button.green:hover {
background:#03A678;
}

.form-button.green .input,.form-button.green .submit,.form-button.green.active {
color:#0888AD;
}

.form-button.purple {
background:#00bbf2;
width:500px;
}

.form-button.purple .submit:hover,.form-button.purple:hover {
background:#f30015;
}

.form-button.purple .input,.form-button.purple .submit,.form-button.purple.active {
color:#f30015;
}

.form-button button,.form-button input,.form-button label {
vertical-align:top;
font-family:inherit;
color:inherit;
background:0 0;
border:none;
padding:0;
margin:0;
font-size:16px;
height:50px;
line-height:50px;
}

.form-button button:focus,.form-button input:focus,.form-button label:focus {
outline:0;
}

.form-button button.cta,.form-button input.cta,.form-button label.cta {
cursor:pointer;
padding-right:16px;
}

.form-button button.cta .icon,.form-button input.cta .icon,.form-button label.cta .icon {
vertical-align:top;
font-size:20px;
height:50px;
line-height:50px;
padding-left:16px;
}

.form-button button.cta .text,.form-button input.cta .text,.form-button label.cta .text {
text-transform:uppercase;
margin-left:12px;
}

.form-button button.input,.form-button input.input,.form-button label.input {
width:0;
height:16px;
line-height:20px;
padding:17px 5px 17px 15px;
}

.form-button button.submit,.form-button input.submit,.form-button label.submit {
cursor:pointer;
height:50px;
line-height:50px;
font-size:20px;
padding:0 10px;
}

.form-button button.submit:hover,.form-button input.submit:hover,.form-button label.submit:hover {
color:#fff;
}

.form-button.active {
background:#fff!important;
}

.form-button.active .cta {
cursor:auto;
padding-right:0;
}

.form-button.active .submit {
display:inline-block;
}

.fa2 {
margin-top:0!important;
}

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divesquerda" align="" class="row">
<div class="form-button full-width auto-close purple">
    <label for="share" class="cta">
        <i class="icon fa fa2 fa-truck"></i>
        <span class="text">Serviço Delivery</span>
    </label>
    <input type="text" placeholder="Digite aqui seu CEP" id="share" name="share" class="input" />
    <button type="button" class="submit" onclick="saiesquerdaentradireita()">
        <i class="fa fa2 fa-arrow-right"></i>
    </button>
</div>
<br>
<br>
<p style="color: #32697E; text-decoration:;">
    <a href="">Não sabe o CEP? Digite seu endereço.</a>
</p>
</div>

Thank you very much!

Answer 1

Try something like that

$(function() {
    $(".form-button").click(function(t) {
        if (!$(this).hasClass("active")) {
            var i = $(this).hasClass("full-width"),
            s = $(this).outerWidth();
            i && (s = $(this).parent().width());
            var n = $(this).find(".input"),
            a = s - $(this).find(".icon").outerWidth() - $(this).find(".submit").outerWidth() - (n.outerWidth() - n.width());
     i ? n.animate({
         width: a
     }) : n.css("width", a), n.css("display", "inline-block"), $(this).addClass("active"), n.focus()
 }
 }), $(document).ready(function(){
         $('.cta').click();
     })
 });

Now a click on the elements with class 'Cta' is triggered after page loading.