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(
    'mouseover',
    function() {
      console.log(`mouse over`);
      isOver = true;
    },
    false
  );
  e.addEventListener(
    'mouseleave',
    function() {
      console.log(`mouse leave`);
      isOver = false;
    },
    false
  );
  document.addEventListener('keypress', function({key}) {
    console.log(`key is`, event);
    if (isOver == true) {
      if (key === 'a' || key === 'A' || key === 'ф' || key === 'Ф') {
        alert('somethink');
        e.parentElement.classList.toggle('opened');
      }
    }
  });
  e.addEventListener(
    'click',
    function() {
      this.parentElement.classList.toggle('opened');
    },
    false
  );
});