JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<div>
    <input type="text" />
    <input type="submit" value="search">
</div>

CSS

div {
    position: relative;
    padding: 10px;
    background: #555;
}

input[type=submit] {
    margin: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

input[type=text] {
    opacity: 0;
}

JavaScript

var btn = $('input[type=submit]');
var txt = $('input[type=text]');

btn.click(function(event){
        
    if(txt.val() !== ''){
        // Let the button post
        confirm("Post?");
    } else {
        
        event.preventDefault();

        
        // Closed, so open
        btn.animate({
            left: '200px'
        }, 400);
        
        txt.animate({
            opacity: 1
        }, 400);        
        
        
        // Focus on the textbox
        txt.focus();
        
        buttonActive();
    }    
});

txt.keyup(function(){
   buttonActive(); 
});

txt.focusout(function(){
    
    txt.val('');
    
    //Open, so close
    btn.animate({
        left: '0'
    }, 400);
    
    txt.animate({
        opacity: 0
    }, 400);  
    
    buttonActive(true);
});

function buttonActive(override){
    override = override || false;
    
    if (txt.val() !== '' || override){
        btn.attr("disabled", false);
    } else {
        btn.attr("disabled", true);
    }
}