JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='cornercheck'>Flock check</div>

<div id='cornersearch' style='display:none;'>
<div id='cornergrouphold'>Group: <select id='cornergroups' style='width:100px;'><option>group1</option><option>group2</option></select></div>
<div id='cornergriffhold' style='display:none;'>Griff: <select id='cornergriffs' style='width:100px;'><option>Falcon</option><option>Sandy</option></select>
<div id='cornergriffimg'>Choose a griffin to check.</div>
</div>
</div>
<div id='cornerstatus' style='display:none;'>
griffinfo
</div>

CSS

#cornercheck {position:fixed;left:40px;bottom:40px;width:80px;height:80px;background-color:white;border:1px solid grey;border-radius:5px;z-index:90;cursor:pointer;}

#cornersearch {width:160px;height:160px;background-color:white;border:1px dotted green;text-align:right;border-radius:5px;padding:5px;position:fixed;left:70px;bottom:35px;z-index:80;}

#cornergrouphold {height:30px;border:1px dotted blue;}
#cornergriffhold {margin-top:5px;height:30px;border:1px dotted red;}

#cornergriffimg {border:1px solid green;width:100px;height:70px;position:fixed;bottom:45px;left:130px;}

#cornerstatus {width:160px;height:160px;background-color:white;border:1px dotted green;text-align:right;border-radius:5px;padding:5px;position:fixed;left:240px;bottom:35px;z-index:80;}


/*  #cornerspan {display:none;} */

JavaScript

$("#cornercheck").click(function() {
  $("#cornergriffhold,#cornerstatus").hide();
  $("#cornersearch").toggle(500);
});

$("#cornergroups").change(function() {
  $("#cornergriffhold").show(); $("#cornerstatus").hide();
});
$("#cornergriffs").change(function() {
  $("#cornerstatus").show();
});