javascript - How can I hide a <div> and have it show only when a <textarea> has focus?

Question

I'm using the same editor as Stack Overflow and the HTML looks something like this with multiple editors on a page:

<pagedown-admin id="modal-data-solution-1">
   <div>
      <div>
         Menu
      </div>
   </div>
   <textarea>
         ABC
   </textarea>
</pagedown-admin>
<pagedown-admin id="modal-data-solution-2">
   <div>
      <div>
         Menu
      </div>
   </div>
   <textarea>
         ABC
   </textarea>
</pagedown-admin>

Is there a way that I could hide the <div> that contains the menu and have it show only when the <textarea> has focus. Note that I'm not using jQuery so it would need to be a vanilla JavaScript solution. I'm just not sure where to start trying to code something like that.

Answer 1

You could attach to the native event handlers a function like it is done in this question, and show/hide the menu.

(function() {
    var elm = document.getElementById("textarea");
    elm.addEventListener('blur', handler, false);
    elm.addEventListener('focus', handler, false);

    function handler(event) {
        if (event.type === "blur") {
            document.getElementById("menu").style.display = "none";
        }
        else {
            document.getElementById("menu").style.display = "";
        }
    }
})();

<pagedown-admin id="modal-data-solution-2">
   <div id="menu" style="display: none">
      <div>
         Menu
      </div>
   </div>
   <textarea id="textarea">
         ABC
   </textarea>
</pagedown-admin>