JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<input class="trigger">
<div id="high">lots<br>lots<br>lots<br>lots<br>lots<br>lots<br>lots<br>lots<br></div>
<button>click</button>
<div id="slide"></div>

CSS

#slide {
    display: block;
    background: #ccc;
    height: 75px;
    width: 300px;
    margin-top: 20px;
}

JavaScript

var $high = $('#high'),
    $slide = $('#slide');

$('.trigger').on('focusin focusout', function() {
   $high.stop().slideToggle();
});

$('button').on('click', function(){
    $slide.stop().slideToggle();
})