I want to have two textareas on top of one another in HTML, and switch the order they are stacked, with click of a button

Question

I have two textareas, one on top of another, and I want to have a click of a button swap which one is viewed.

Here is the code I have so far:

    <div id="textAreas">
        <div style="position: relative" class = "container_row"> 
           <div id="layer1" class="layer1">
               <textarea style="top:0; left:0; z-index: 2" readonly id="editTextArea1" rows = "1" cols="40"> Layer 1 </textarea> 
           </div>
           <div id="layer2" class="layer2">
               <textarea style="top:0; left:0; z-index: 1; display: none" id="editTextArea2" rows = "1" cols = "40"> Layer 2 </textarea>
           </div>
        </div>
    </div>

I then have a button:

     <input type="image" onclick="switchButtons()" src="<c:url value="/resources/images/edit.png" />" name="edit" class="btTxt submit" id="saveForm" />

With the click of that button, the "layer2" textarea should be visible, and "layer1" textarea should not.

Here is the switchButtons() method in javascript:

    function switchButtons() {
        document.getElementById("layer1").style.display = "none";
        document.getElementById("layer2").style.display = "block";
}

My goal is to have the layer1 textarea be visible, and readonly, and with the click of the button, have layer2 textare show up where layer1 textarea was, but be editable. Let me know what I can do. Thank you!

Answer 1

You have placed the display:none on the textarea and on the script you are changing the display of its parent (div).

  <script> function switchButtons() { if (document.getElementById("layer1").style.display == "block") { document.getElementById("layer1").style.display = "none" document.getElementById("layer2").style.display = "block"; } else { document.getElementById("layer1").style.display = "block"; document.getElementById("layer2").style.display = "none"; } } </script> <div id="textAreas"> <div style="position: relative" class = "container_row"> <div id="layer1" class="layer1" style="display: block;"> <textarea style="top:0; left:0; z-index: 2;" readonly id="editTextArea1" rows = "1" cols="40"> Layer 1 </textarea> </div> <div id="layer2" class="layer2" style="display: none;"> <textarea style="top:0; left:0; z-index: 1;" id="editTextArea2" rows = "1" cols = "40"> Layer 2 </textarea> </div> </div> </div> <input type="button" onclick="switchButtons()" name="edit" class="btTxt submit" id="saveForm" value="switch" /> 

Explanation:

I have moved the display to the parent div. You could use textarea instead, but you would have to move the id layer1 to the textarea (or create a new id for the textarea).

The script is called everytime you click on the button. It checks the display of layer1. If it's visible (block), it changes it to none and makes the layer2 visible (block). If it's not visible (none), it changes it to visible (block) and makes the layer2 not visible (none).

Answer 2

change the place of display:none to the div and not the textarea

       <div id="layer2" class="layer2" style="dispaly:none">
           <textarea style="top:0; left:0; z-index: 1" id="editTextArea2" rows = "1" cols = "40"> Layer 2 </textarea>
       </div>