JSFiddle - React, Tailwind, and code Playground

by jorgeherrera

HTML

<header id="primary" class="clearfix">
    <div class="wrapper">	
        <a href="/">
            <img class="logo-header" src="/wp-content/themes/frontendhero/images/frontend-hero.svg" alt="Frontend Hero">
		</a>
        <div id="search-area">
            <form>
                <input type="text">
                <button>
                    <i class="fa fa-search"></i>
                </button>
            </form>
        </div>
	</div>
</header>

CSS

#search-area input {
	border: 1px solid #ccc;
	padding: 10px;
	font-size: 18px;
	border-radius: 4px;
	height: 40px;
	width: 35px;
	position: absolute;
	right: 0px;
}
	#search-area button {
		position: absolute;
		right: 0px;
		height: 40px;
		width: 40px;
		border-radius: 4px;
		border: 0px none;
		background: #ccc;
		color: #fff;
		font-size: 22px;
		cursor: pointer;
	}
	#search-area button.active {
		border-radius: 0px 4px 4px 0px;
	}

JavaScript

jQuery(document).ready(function() 
{
	"use strict";
	
	jQuery('#search-area button').click(function()
	{
		var return_bool = false;
		
		if(jQuery(this).hasClass('active') && jQuery('#search-area input').val().length !== 0)
		{
			return_bool = true;
		}
		
		else if(jQuery(this).hasClass('active') && jQuery('#search-area input').val().length === 0)
		{
			jQuery('#search-area input').animate({
				width: '35px'
			}, 350, 'easeOutExpo', function()
			{
				jQuery('#search-area button').removeClass('active');
			});
			
			return_bool = false; 
		}
		else
		{
			jQuery(this).addClass('active');
			
			jQuery('#search-area input').animate({
				width: '250px'
			}, 350, 'easeOutExpo');
			
			return_bool = false; 
		}
		
		return return_bool;
		
	});

});