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

Automatically advance to the next input field and go back when the backspace key is pressed after reaching the maximum length

PersistJS callback function is malfunctioning

Interactive font-awesome icons within an interactive dropdown menu

What is the best way to group all matched objects from an array based on multiple keys?

Creating a unique filter that combines and filters data from two separate API calls for

Locate elements based on an array input in Mongoose

How to trigger a function in a separate component (Comp2) from the HTML of Comp1 using Angular 2

Can you explain the significance of triple brackets (e.g. {{{ content }}}) in the context of Javascript/Typescript?

Ways to prevent styles from being overridden by those specified in JavaScript

Disabling the Enter key to submit an AJAX form is causing the focus to not move to the next input field

Pressing the dart key will alter the sprite's direction in a 2D game

Having trouble with the Express.js app.post request functionality

Display hyperlinks upon hovering over text

Attempting to reset the altered values proves ineffective in different Ctrl instances within AngularJS

Navigate through the document object model and identify every pair of input boxes sequentially to build a JavaScript object

php Use cURL and the DOM to extract content with specified CSS styling

Entry Points for Logging In

What is preventing this Javascript from running in Firefox and Chrome?

When working with an array of objects in Vue.js, what is the optimal approach: replacing the entire array or modifying individual values?

An issue has arisen while trying to run NPM start on ReactJS