Changing display from block to none for multiple textareas

Question

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>

Answer 1

Read this: https://www.w3schools.com/jsref/prop_style_display.asp

In order to change an element's display property, you can access it like this:

document.querySelector("myelement").style.display = "theValueIWant";

Mind the different selectors

Now, what you want is when we click 2.svg to change textarea one and three's diplay property from block to none. First select these using document.querySelector("textarea.one") and then change the value: document.querySelector("textarea.one").style.display = "none"; Now, to call this javascript you need an event. You can use the onClick one. Simply

 <img id="header1" onClick="document.querySelector('textarea.one').style.display = 'none';" src="/1.svg" alt="Open Menu" class="menu">

would change the display property of the textarea.one element on click.

Method I In order to call multiple elements, what I suggest is adding one more class to the two elements that you are going to hide, and the simply use the above code with changing the class. E.g., to textarea one and three add class hideOne and then hide the element with document.querySelector("hideOne").style.display = "none";

Method II Another way you can accomplish this, is by creating a function that would hide the two components. Create a script tag and then use the above selector to hide the two elements:

<script>
function hide1(){
document.querySelector('textarea.one').style.display = "none"
document.querySelector('textarea.three').style.display = "none"
}
</script>

Then call the function by inserting into the element to be clicked(your svg): onClick="hide1()"

That's it!

Answer 2

The following is a very short way of achieving the same without jQuery.

It is not as easy to read as the jQuery based solution but contains certain elements that might be interesting to you too:

1. I used a "delegated event attachment" which means I attached the click event handler to the parent element (the first div in the document) of the three <img> elements. Doing it this way keeps the document "fast" and makes it easily extendable by further elements.
2. I identify the clicked image by its id attribute: only if the clicked element has the tagName==="DIV" and its id starts with "header", I will take the remaining (id-string - 1) as the index to look-up the class name c in the cls array.
3. In the txtas.forEach() loop I will then make the <textarea> containing c in its classList visible, while all others will be hidden.

const cls=["one","two","three"],
      txtas=document.getElementsByName("myInput");
document.querySelector("div").onclick=ev=>{ let el=ev.target;
  if(el.tagName==="IMG"&&el.id.substr(0,6)==="header"){
    let c=cls[el.id.substr(6)-1];
    txtas.forEach(t=>t.style.display=t.classList.contains(c)?"":"none");
  }
}

<div>
      <img id="header1" src="/1.svg" alt="first" class="menu">
      <img id="header2" src="/2.svg" alt="second" class="menu">
      <img id="header3" src="/3.svg" alt="third" class="menu">
</div>

<div class="textniz">
  <textarea class="one" name="myInput" readonly>
Line one
Line two
Line three</textarea>
</div>

<div class="textniz">
  <textarea class="two" name="myInput" readonly>
Line four
Line five
Line six</textarea>
</div>

<div class="textniz">
  <textarea class="three" name="myInput" readonly>
Line seven
Line eight
Line nine</textarea>
</div>

I removed the id attributes from your <textarea> elements as they would have been dupes. The script works very well without them.

Answer 3

Impossible with just CSS but so easy with JQuery (which I think would be easier fo you to start as the semantic is much more read friendly for begginers than pure javascript)

like this:

$("#header1").click(function(){
  $(".two").hide();
  $(".three").hide();
  $(".one").show();
});
$("#header2").click(function(){
  $(".one").hide();
  $(".three").hide();
  $(".two").show();
});
$("#header3").click(function(){
  $(".one").hide();
  $(".two").hide();
  $(".three").show();
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
      <img id="header1" src="/1.svg" alt="Open Menu" class="menu">
      <img id="header2" src="/2.svg" alt="Open Menu" class="menu">
      <img id="header3" 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>

Answer 4

So as per your question, if it is just a quick switch and you want only one view to be active, it's better and easy to use jQuery because it is very direct, @Alvaro has already shared the quick code snippet. It's very easy to play around with jQuery.

Disclaimer: It makes your life so easy that if in case you try to learn a full seasoned framework, then there will be a long workaround. But get started with jQuery. You'll find it very interactive.

Happy Coding :)