JSFiddle - React, Tailwind, and code Playground

by Zsanett Tamás

HTML

<input type="search" id="search_box">
<div id="search_panel" style="background-color:black;width:100px;height:100px"></div>

JavaScript

var toggle = function () {
    $("#search_panel").fadeIn(100);
};

$(document).ready(function () {
    $("#search_panel").fadeOut(100);

    $("#search_box").on("click", function () {
        if ($(this).is(':focus')) {
            $(this).on("click", toggle);
        } else {
            $(this).focus();
        }
    });

    $("#search_box").blur(function () {
        $(this).off("click", toggle);

        $("#search_panel").fadeOut(100);
    });
});