JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="client-history">
<input class="client-history-searchbar hidden" placeholder="autofocus via javascript" />
<input type="button" class="ibox-title_replace" value="header" />
<input type="button" class="btn-dismiss" value="Cancel" />
</div>

CSS

.hidden {
  display: none;
}

JavaScript

function iboxHistorySearch() {
        var header = $('.client-history .ibox-title_replace'),
            searchbar = $('.client-history .client-history-searchbar'),
            closeBtn = $('.client-history .btn-dismiss');

        header.on('click', function (e) {
            e.preventDefault();
            if (searchbar.hasClass('hidden')) {
                searchbar.removeClass('hidden').focus();
                $(this).addClass('hidden');
            }
        });

        closeBtn.on('click', function (e) {
            e.preventDefault();
            if (header.hasClass('hidden')) {
                header.removeClass('hidden');
                searchbar.addClass('hidden');
            }
        });
    }

    iboxHistorySearch();