JSFiddle - React, Tailwind, and code Playground

by ashfame

HTML

<header id="header">
    <div class="left">
        <!--logo-->
        <a href="#" id="logo"><img src="http://wpreadable.com/wp-content/uploads/2012/04/logo.png" alt=""></a>
        <!--/logo-->
    </div>
    <div class="right search-bar">
        <img id="search-glass" src="http://wpreadable.com/wp-content/plugins/wpreadable/html/images/search-indicator.png" alt="">
        <input id="search-submit" value="Search" type="button" />
        <input id="search-input" type="text" name="search" /> 
    </div>
        
</header>

CSS

body {
    background-color:#c0c0c0;
}
#header {
    border:solid 1px #333;
    margin-top:30px;
    height:50px;
    padding:20px 5px;
}
#search-input {
    float: right;
    display:none;width:0px;
}
#search-submit{display:none;float:right;}

.left { float:left; }
.right { float:right; }

JavaScript

var sg = document.getElementById('search-glass');
var si = document.getElementById('search-input');
var ss = document.getElementById('search-submit');

console.log(sg);
console.log(si);
console.log(ss);

function expandSearch() {
    var left = document.getElementsByClassName('left')[0].style.display = 'none';
    document.getElementsByClassName('right')[0].style.width = '100%';
    ss.style.width = '10%';

    console.log('call');

    sg.style.display = 'none';
    si.style.display = 'block';
    ss.style.display = 'block';

    console.log(window.innerWidth);

    tmp_width = 0;

    pogo = setInterval(function() {
        console.log('running');
        if (tmp_width < 85) {
            tmp_width += 1;
        } else {
            clearInterval(pogo);
            si.style.float = 'left';
        }

        si.style.width = tmp_width + '%';
    }, 5);
}

sg.addEventListener('click', expandSearch, false);