JSFiddle - React, Tailwind, and code Playground

HTML

<div id="game">  
    <div id="pic1"></div>
    <div id="pic2"></div>
    <div id="pic3"></div>
    <div id="pic4"></div>
    <div id="pic5"></div>

<input type="image" value="Click"  />
<div class="hidden_div"></div>
    <div id="bottom"></div>
</div>

CSS

#game {width:520px; height:200px; background:#b1b1b1; border:solid 1px #000;}
#game input {width:120px; height:50px; margin:20px 0 0 180px; border:solid 1px #000000;}

#pic1 { width:90px;
        height:90px; 
        border:solid 1px #000000; 
        display: inline-block; 
        margin:10px 0 0 7px;
        }
#pic2 { width:90px;
        height:90px;  
        border:solid 1px #000000; 
        display: inline-block; 
        margin:10px 0 0 7px;
        }
#pic3 {width:90px;
        height:90px;  
        border:solid 1px #000000; 
        display: inline-block; 
        margin:10px 0 0 7px;
        }
#pic4 { width:90px;
        height:90px; 
        border:solid 1px #000000; 
        display: inline-block; 
        margin:10px 0 0 7px;
        }
#pic5 { width:90px;
        height:90px; 
        border:solid 1px #000000; 
        display: inline-block; 
        margin:10px 0 0 7px;
        }

#bottom { width:520px; height:10px; background:#000;}

JavaScript

$(document).ready(function() {
    var open = false;
    $(":image").click(function() {
        $('#game').animate({height: (open ? "-": "+") +"=300"}, 1000);
        open = !open;
   });
});