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

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.

Answers


Here's an example of a generic solution, that will work with multiple menus based on your markup. The JavaScript could be improved, but it will give you an idea, how to solve it.

HTML

<pagedown-admin>
    <div>
        <div class="off">Menu</div>
   </div>
   <textarea>
         ABC
   </textarea>
</pagedown-admin>

CSS

.off {
    display: none;
}

JavaScript

var tas = document.getElementsByTagName('textarea');

for (var i = 0, j = tas.length; i < j; ++i) {
    tas[i].onfocus = function() {
        var e = this.parentNode.firstElementChild.firstElementChild;
        e.classList.toggle('off');
    }

    tas[i].onblur = function() {
        var e = this.parentNode.firstElementChild.firstElementChild;
        e.classList.toggle('off');
    }
}

Demo

Try before buy


Using the example from the question @AlejandroC mentioned, here is one viable solution

(function() {
    document.getElementById('first').addEventListener('blur', handler, false);
    document.getElementById('first').addEventListener('focus', handler, false);
    document.getElementById('second').addEventListener('blur', handler, false);
    document.getElementById('second').addEventListener('focus', handler, false);

    function handler(event) {
        if (event.type === "blur") {
            document.getElementById(this.id+'Div').style.display="none";
        }
        else {
            document.getElementById(this.id+'Div').style.display="block";
        }
    }
})();
<pagedown-admin id="modal-data-solution-1">
   <div>
      <div id='firstDiv' style='display:none'>
         Menu
      </div>
   </div>
   <textarea id='first'>
         ABC
   </textarea>
</pagedown-admin>
<pagedown-admin id="modal-data-solution-2">
   <div>
      <div id='secondDiv' style='display:none'>
         Menu
      </div>
   </div>
   <textarea id='second'>
         ABC
   </textarea>
</pagedown-admin>

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>

Use onfocus event when you focus the textarea and onblur event when you are losing the focus on it :

function hideDiv(){
   document.getElementById("divID").style.display = 'none';   
}

http://jsfiddle.net/8zm3rw7p/4/

UPDATED :

http://jsfiddle.net/8zm3rw7p/9/


If the structure will always be the same, you can use this method for efficiency.

Select all of the menus using Document.querySelectorAll(), then iterate through them with a for() loop.

In each iteration, set display: none to hide the element, then attach an onfocus event handler and an onblur event handler to its nextElementSibling.

In the onfocus event handler, remove the modified display property from the focused element's previousElementSibling

In the onblur event handler, set display: none on the focused element's previousElementSibling


var menus = document.querySelectorAll('[id^=modal-data-solution] > div'), 
    l = menus.length, i;

for(i = 0; i < l; i++) {
    menus[i].style.display = "none";
    menus[i].nextElementSibling.onfocus = handleFocus;
    menus[i].nextElementSibling.onblur = handleBlur;
}
    
function handleFocus() {
    this.previousElementSibling.style.display = '';
}

function handleBlur() {
    this.previousElementSibling.style.display = 'none';
}
<pagedown-admin id="modal-data-solution-1" style="display: block;">
   <div>
      <div>
         Menu
      </div>
   </div>
   <textarea>
         ABC
   </textarea>
</pagedown-admin>
<pagedown-admin id="modal-data-solution-2" style="display: block;">
   <div>
      <div>
         Menu
      </div>
   </div>
   <textarea>
         ABC
   </textarea>
</pagedown-admin>

Need Your Help

How to open Photos by the FileChooser with a certain extension with JavaFX?

javafx filechooser

I'm making photo manager and I'm searching to know how to get files from the FileChooser with some extension:*.png - *.jpg ... So which method should I use or which code should I do ?

Android API 21 Toolbar Padding

android android-toolbar

How do I get rid of the extra padding in the new Toolbar with Android SDK API version 21 (the support library)?