JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<input type="text" class="showdiv" Placeholder="Search by Keyword" />
<div class="testdiv">
  <input type="checkbox"> Search only open source materials
</div>

CSS

body {
  padding: 50px
}

.showdiv {
  width: 100%;
  height: 30px;
  padding: 10px
}

.testdiv {
  display: none;
  margin-top: 0;
  width: auto;
  background-color: #efefef;
  padding: 20px;
  font: 12px Arial, san serif;
}

*:focus {
  outline: none !important;
}

JavaScript

$(document).ready(function() {
  $('.showdiv').focus(function() {
    $('.testdiv').fadeIn(1000);
  }).focusout(function() {
    $('.testdiv').fadeOut(1000);
  });

  $('.testdiv input').change(function() {
    $('.testdiv').stop(); // end animation on the faded element
    $('.showdiv').focus(); // return focus to reinstate the focusout handler
  });
});