JSFiddle - React, Tailwind, and code Playground

HTML

<div class="post">
    <button class="btn">open/close</button>
    <div class="comments"></div>
</div>

CSS

.comments {
  background: red;
  height: 40px;
  display: none;
}

.post.opened .comments {
  display: block;
}

JavaScript

document.querySelectorAll(".btn").forEach(function (e) {
var isOver;
e.addEventListener("onmouseover", function () {
    isOver = true;
  });
  e.addEventListener("onmouseout", function () {
  	isOver = false;
  });
  e.addEventListener("keypress", function () {
  if (isOver == true){
    if (key === 'a' || key === 'A' || key === 'ф' || key === 'Ф') {
      alert('somethink');
  	this.parentElement.classList.toggle("opened");
    }
    }
  })
	e.addEventListener("click", function () {
  	this.parentElement.classList.toggle("opened");
  });
})