JSFiddle - React, Tailwind, and code Playground

by aadaam

HTML

<form id="egyik">
    <div>
        <label>Cimzett</label><input>
    </div>
    <div>
        <label>Targy</label><input>
    </div>
    <button id="keres" class="active">Keres</button>
</form>
<form id="masik">
    Mentett keresesek:
    <select size=5>
        <option>Egyik mentett</option>
        <option>Masik mentett</option>
    </select>
    <div class="grayout mentespanel">
        <div>
            Jelenlegi mentese:
            <label>Nev:</label><input>
        </div>
        <button id="mentes">Ment</button>
    </div>
</form>
<div id="talalatok" class="hidden">
    <div>Talalat 1</div>
    <div>Talalat 2</div>
    <div>Talalat 3</div>
    <div>Talalat 4</div>
    <div>Talalat 5</div>
    <div>Talalat 6</div>
    <div>Talalat 7</div>
    <div>Talalat 8</div>
    <div>Talalat 9</div>
    <div>Talalat 10</div>
</div>

CSS

form {
    width:50%;
    font-family:verdana, sans-serif;
    float:left;
    display:block;
    height:200px;
}

label {
    font-weight:bold;
    width:40%;
    text-align:right;
    display:block;
    float:left;
}

select {
    width:90%;
    margin-right:5%;
    height:100px;
    margin-top:1em;
}

div {
    height:20px;
    margin-bottom:0.5em;
}

input {
    float:left;
    width:50%;
    display:block;
}

button {
    background-color:gray;
    border-top:1px solid gray;
    border-left:1px solid gray;
   }

button.active {
    background-color:blue;
    color:white;
}

#keres {
    margin-left:40%;
}

.hidden {
    display:none;
}

.grayout {
    color:gray;
}


.grayout #mentes { 
    color:gray;
    background-color:#eee;
}

.mentes {
    margin-top:1em;
}

JavaScript

$(document).ready(function(){
    function setActiveButton($button){
        $('button.active').removeClass('active');
        $($button).addClass('active');
    }
 
    function enablePanel($panel){
        $($panel).removeClass('grayout');
    }
    
     
    function disablePanel($panel){
        $($panel).addClass('grayout');
    }
    function showResults(){
        $('#talalatok').removeClass('hidden');
    }

    $('#keres').click(function(e){
        
        setTimeout(function(){
            showResults();
            enablePanel($('.mentespanel'));
            setActiveButton($('#mentes'));
        }, 1000);
        
        
        e.preventDefault();
        return false;
    });
})