JSFiddle - React, Tailwind, and code Playground

HTML

<form class="">

    <div class="basic-search">
        <input />
    </div>

    <div class="advanced-search">
        <input />
        <input />
        <input />
    </div>

</form>

<button>KENO!!!!!!</button>

CSS

html, body { margin:0; padding:0; background:#ddd;  }

form { 
    margin:10px; padding:10px;
    border : 1px solid #eee;
    background:#fcfcfc;
}

form > div {
    
    margin:10px 0;
    padding:10px;
    border:1px solid #ddd;
    
}

form .advanced-search {
    display:none;
}

form.advanced .advanced-search {
    display:block;
}

form.advanced .basic-search {
    display:none;
}

JavaScript

$(function () {
    
    $('button').click(function () {
        
        $('form').toggleClass('advanced');
                
    });
    
});