JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="updiv">Header info</div>
<div class="middle" onclick="uparrow()">button UP and DOWN</div>
    <div class="bottomdiv">
        <div class="block">111</div>
        <div class="block">222</div>
       <div class="block">333</div>  
      <div class="block">444</div> 
    </div>
</div>

CSS

.container{
  width:400px;
  height:400px;
  border:1px solid red;
  position: relative; 

  
}
.updiv{
 display:none;
 width:392px;
 height:100px;
  margin:3px;
 border:1px solid blue;
 background:yellow;   
}
.middle{
margin:3px;
 width:392px;
 height:30px;
 background:green;
 color:white;
 text-align:center;   
}
.block{
 width:100%;
 height:100px;   
 background:pink;
 margin-bottom:20px;   
}
.bottomdiv{
overflow-y: scroll; 
margin:3px;
width:392px;
height:350px;
display:block;
border:1px solid blue;        
}

JavaScript

function uparrow(){
 $('.updiv').slideToggle();
 }