I'm currently trying to figure out how to make a text area disappear while another one will appear instead.
I have no knowledge of javascript and I have just started learning the basics of HTML and CSS, is there a chance anyone from the forum can help me out or maybe guide me to the correct path.
I'm attaching the part of the code, to make it more clear.
When you click on "2.svg" it should change the "textarea.one's and three's" "display: block;" into "display: none;"
When you click on "3.svg" it should change the "textarea.two's and one's" "display: block;" into "display: none;"
When you click on "1.svg" it should change the "textarea.two's and three's" "display: block;" into "display: none;"
I hope this explanation is clear enough, I'm also not sure if I'm allowed to ask to provide full code on this forum without preparing anything on my own.
Thank you in advance to whoever will read this!
<div>
<img id="header1" src="/1.svg" alt="Open Menu" class="menu">
<img id="header1" src="/2.svg" alt="Open Menu" class="menu">
<img id="header1" src="/3.svg" alt="Open Menu" class="menu">
</div>
<div class="textniz">
<textarea class="one" id="myInput" name="myInput" readonly>
Line one
Line two
Line three</textarea>
</div>
<div class="textniz">
<textarea class="two" id="myInput" name="myInput" readonly>
Line four
Line five
Line six</textarea>
</div>
<div class="textniz">
<textarea class="three" id="myInput" name="myInput" readonly>
Line seven
Line eight
Line nine</textarea>
</div>