Switching the visibility of multiple textareas from block to none

Question

Switching the visibility of multiple textareas from block to none

I am currently exploring ways to make one text area disappear while another one appears in its place.

With limited knowledge of Javascript and just starting my journey into HTML and CSS, I am reaching out to the forum for assistance or guidance on the right path.

I have included a snippet of the code below for clarity.

On clicking "2.svg," it should change the display property of "textarea.one's and three's" from "block" to "none."

Clicking "3.svg" should toggle the visibility of "textarea.two's and one's" from "block" to "none."

Similarly, selecting "1.svg" should switch the display status of "textarea.two's and three's" from "block" to "none."

I hope this explanation is clear, and I apologize if seeking full code assistance without attempting on my own is not allowed on this platform.

Thank you in advance to anyone who takes the time to 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>

javascript html css

Answer 1

Answer №1

Check out this link for more information: https://www.w3schools.com/jsref/prop_style_display.asp

To modify the display property of an element, you can do so by accessing it in the following way:

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

Make sure to familiarize yourself with different selectors.

If you want to change the display property of textarea one and three to none when clicking on 2.svg, you can achieve this using:
First select these elements using

document.querySelector("textarea.one")

and then update the value:

document.querySelector("textarea.one").style.display = "none";

In order to trigger this JavaScript, you need an event. You can utilize the onClick event. For example,

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

would alter the display property of the textarea.one element upon clicking.

Method I: To target multiple elements, consider adding an additional class to the elements you want to hide, then apply the above code with the updated class. For instance, add class hideOne to textarea one and three and then conceal the elements with

document.querySelector("hideOne").style.display = "none";

Method II: Another approach is to create a function that hides the two components. Create a script tag and use the selectors to hide the elements:

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

Then invoke the function by inserting it into the clickable element (your svg): onClick="hide1()"

That's all there is to it!

Answer 2

Check out this link for more information: https://www.w3schools.com/jsref/prop_style_display.asp

To modify the display property of an element, you can do so by accessing it in the following way:

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

Make sure to familiarize yourself with different selectors.

If you want to change the display property of textarea one and three to none when clicking on 2.svg, you can achieve this using:
First select these elements using

document.querySelector("textarea.one")

and then update the value:

document.querySelector("textarea.one").style.display = "none";

In order to trigger this JavaScript, you need an event. You can utilize the onClick event. For example,

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

would alter the display property of the textarea.one element upon clicking.

Method I: To target multiple elements, consider adding an additional class to the elements you want to hide, then apply the above code with the updated class. For instance, add class hideOne to textarea one and three and then conceal the elements with

document.querySelector("hideOne").style.display = "none";

Method II: Another approach is to create a function that hides the two components. Create a script tag and use the selectors to hide the elements:

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

Then invoke the function by inserting it into the clickable element (your svg): onClick="hide1()"

That's all there is to it!

Answer 3

Answer №2

Here is a concise method to achieve the same result without relying on jQuery.

While not as straightforward as using jQuery, this approach includes some interesting elements:

I implemented a "delegated event attachment" by attaching the click event handler to the parent element (the first div in the document) of the three <img> elements. This helps maintain document performance and allows for easy extension with additional elements.
To identify the clicked image, I utilize its id attribute: only if the clicked element's tagName==="DIV" and its id starts with "header", will I extract the remaining portion (id-string - 1) to find the corresponding class name c in the cls array.
Within the txtas.forEach() loop, I show the <textarea> containing the class c in its classList, while hiding all others.

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 have omitted the id attributes from your <textarea> elements to avoid duplicates. The script functions effectively without them.

Answer 4

Here is a concise method to achieve the same result without relying on jQuery.

While not as straightforward as using jQuery, this approach includes some interesting elements:

I implemented a "delegated event attachment" by attaching the click event handler to the parent element (the first div in the document) of the three <img> elements. This helps maintain document performance and allows for easy extension with additional elements.
To identify the clicked image, I utilize its id attribute: only if the clicked element's tagName==="DIV" and its id starts with "header", will I extract the remaining portion (id-string - 1) to find the corresponding class name c in the cls array.
Within the txtas.forEach() loop, I show the <textarea> containing the class c in its classList, while hiding all others.

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 have omitted the id attributes from your <textarea> elements to avoid duplicates. The script functions effectively without them.

Answer 5

Answer №3

Not achievable using solely CSS, but can be easily implemented with JQuery (which I believe is more beginner-friendly than pure javascript due to its semantic simplicity).

Here's an example:

$("#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 6

Not achievable using solely CSS, but can be easily implemented with JQuery (which I believe is more beginner-friendly than pure javascript due to its semantic simplicity).

Here's an example:

$("#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 7

Answer №4

When it comes to quickly switching between views and only needing one view active, jQuery is the way to go. It's a straightforward and easy-to-use solution, as @Alvaro has already demonstrated with a quick code snippet. jQuery allows for easy manipulation and customization.

It's important to note that while jQuery simplifies the process immensely, diving into a full-fledged framework may present more challenges. Starting with jQuery is a great way to get your feet wet and experience its interactive nature.

Keep coding happily :)

Answer 8

When it comes to quickly switching between views and only needing one view active, jQuery is the way to go. It's a straightforward and easy-to-use solution, as @Alvaro has already demonstrated with a quick code snippet. jQuery allows for easy manipulation and customization.

It's important to note that while jQuery simplifies the process immensely, diving into a full-fledged framework may present more challenges. Starting with jQuery is a great way to get your feet wet and experience its interactive nature.

Keep coding happily :)

Switching the visibility of multiple textareas from block to none

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for successfully utilizing hyphens when passing an object property as an argument

Maintaining Styles After Focus is Removed in CSS: A Guide

I'm struggling to incorporate the JQuery slideDown function into my code. Can someone lend a hand?

What are the steps to verify if an iframe is lacking content?

Error: Unable to assign value to property 'src' because it is null

Issue with Moment.js incorrectly formatting date fields to a day prior to the expected date

Enclose every line of the paragraph within a <span> element

Tips for overlapping children in a column flex direction while maintaining the parents' positioning

The issue with MUI TextField: the outline is overlapping the label

Axios removes the async functionality

Using a div in React to create a vertical gap between two React elements

What is the best way to implement a conditional check before a directive is executed in Angular, aside from using ng-if

Setting the height of a div using CSS and navigating between views using Angular UI

Having difficulty creating a shadow beneath a canvas displaying Vega charts

Determine the placement of the body with CSS styling

How to Align React Material UI Grid with Varying Row Counts in Each Column

Using Material-UI to add a pseudo class '::before' with component class properties

Running a React application through a personalized Express server, all the while ensuring seamless automatic updates throughout the development

The output of jQuery('body').text() varies depending on the browser being used

Steps for moving data from a JavaScript variable to a Python file within a Django project