Click to hide and show the division

I have a sticky Ads at the footer with a HIDE button,
I want when I click HIDE .stickyads content should be hidden by sliding down, but HIDE but should be appearing so as when I clcik again, the .stickyads content should appear by sliding up.

CSS:

@media (max-width: 800px) {   
     .stickyads { 
      position: fixed; 
      bottom: 0px; 
      left: 0;
    } 
     
    .stickyadsHide { 
      width: 30px; 
      height: 30px; 
      display: flex;
      position: absolute; 
      right: 0px;
      top: -30px; 
    }
     
    .stickyads .stickyadsContent { 
      overflow: hidden; 
      display: block;
      position: relative;
      width: 100%;
    }
}

HTML Part:

<div class='stickyads'>
   <div class='stickyadsHide' >
      <span>HIDE</span>
   </div>
   <div class='stickyadsContent'>
      Content Here...
   </div>
</div>

Solution

button = document.querySelector('.stickyadsHide');
adCont = document.querySelector('.stickyadsContent');
hide = document.querySelector('.hide');
show = document.querySelector('.show');


button.addEventListener("click", () => {
    adCont.classList.toggle('visbility');
    hide.classList.toggle('visbility');
    show.classList.toggle('visbility');
});

.stickyadsHide {
    width: 50px;
    height: 50px;
}

.btn {
    position: absolute;
}

.stickyadsContent,
.btn {
    opacity: 0;
    transition: opacity 0.5s;
}

.visbility {
    opacity: 1;
    transition: opacity 0.5s;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    
    <div class='stickyads' id='removeads'>
        <div class='stickyadsHide'>
            <span class="btn hide visbility">HIDE</span>
            <span class="btn show">SHOW</span>
        </div>
        <div class='stickyadsContent visbility'>
            Content Here...
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>