JSFiddle - React, Tailwind, and code Playground

HTML

<form id="search_form" action="">
    <input type="text" name="q" placeholder="search terms">
    <input type="submit" value="search">
    <div class='search-panel'>
        <label>
            <input type="checkbox" value="1"><span>option</span>
            <input type="checkbox" value="1"><span>option2</span>
            <input type="checkbox" value="1"><span>option3</span>
        </label>
    </div>
</form>

CSS

.search-panel{
    background:red;
    padding: 10px;
}

JavaScript

$(document).ready(function () {
    $(".search-panel").hide();
    $("#search_form [type='text']")
        .focus(function () {
        $(".search-panel").slideDown("fast");
    })
        .focusout(function () {
        $(".search-panel").slideUp("fast");
    });
});