Click and hold reveal and release to hide with timer

sorry for the stupid question, but I couldn’t really find an answer. For an oTree project, I need to create a button (clickbutton) where if clicked AND held, a box of information is revealed (effectbox) and if released the box disappears. I also want to record the time spent “holding” the button, and I can imagine that the participant will click and “hold” multiple times, but I only need the total time spent “holding” the button regardless of how many times it has been clicked. This is what I have so far:

var showBox = document.querySelectorAll(".clickbutton");
      var effectbox = document.querySelectorAll(".effectbox");

      showBox.forEach(function (el) {
        el.addEventListener("click", function () {
          effectbox.forEach(function (e) {
            e.classList.remove("show");
          });
          var id = el.getAttribute("data-id");
          document.getElementById(id).classList.add("show");
        });
      });

Thanks in advance!