I'm having a difficulty that I can not solve ... I do not understand much of JavaScript, so I decided to ask.
I am editing this site in HTML: link
And I want to take the animation out of the "Delivery Service" box and leave only the email field.
Follow 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><divid="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!