I have a simple emoji picker and the ballon remains open as default when the page is refreshed, I can't find a way how to keep it close and only open the ballon when pressing a button.

HTML

<div class="container">                                                                            
      <div class="emoji-btn open"><img src='images/smileys.png' title='Smileys'>
       <!--this is the div I want to keep hidden till I click the button > -->  <div class="emoji-popup">
            <div class="emoji-wrapper"></div>
         </div>
      </div>
</div>

JS

emojibtn.addEventListener("click", function (e) {
   e.stopPropagation();
   this.classList.toggle("open");
});
document.body.addEventListener("click", function () {
   emojibtn.classList.remove("open");
});

CSS

.emoji-popup {
   position: absolute;
   top: -140px;
   left: 10px;
   height: 130px;
   width: 194px;
   background: #999;
   border-radius: 2px;
   text-align: left;
   overflow-y: auto;
   opacity: 0;
   pointer-events: none;
   transition: all 0.25s;
   box-sizing: border-box;
}

.emoji-wrapper {
   overflow: hidden;
   padding: 10px;
   box-sizing: border-box;
}
.emoji-popup .emoji-img {
   margin: auto;
   width: 30px;
   height: 30px;
   text-align: center;
   border-radius: 5px;
}

.emoji-popup .emoji-img:hover {
   background: rgba(0, 0, 0, 0.25);
}