jQuery to hide and show textarea

Question

I have a textarea that I want to show/hide when ever I click a button and also I need it to target this way because ill be using it in an undefined number of times

SAMPLE IMAGE HERE

SAMPLE IMAGE HERE

here is the HTML that I want to

<div class="input-group mb-3">
    <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
    <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2"><i class="bi bi-plus-circle"></i></button>
</div>
<textarea class="form-control" id="multipleNameReq"></textarea>
                

and here is the script I try to use hiding/Showing it

$('body').on('click', '.buttonMultipleNameReq',function(){
    const element1 = $(this);
    const target1 = element1.parent().parent().find("#multipleNameReq");
    console.log(target1);

    if (target1.style.display === "none") {
    target1.style.display = "block";
    } else {
    target1.style.display = "none";
    }
})

Answer 1

the accepted answer will work fine for nonduplicate id of textarea or any other elements, but as you have shown in your image if you want to work this for multiple textarea or any elements I suggest you use the class attribute instead of the id attribute, here is the explanation for why to not use same id multiple times,

Duplicate IDs are common validation errors that may break the accessibility of labels, e.g., form fields, and table header cells.

To fix the problem, change an ID value if it is used more than once to be sure each is unique.

here below is some piece of code that may help you to get what are you looking for

$('body').on('click', '.buttonMultipleNameReq',function(e){
    let textArea = $(e.target).parent().parent().find('textarea');
    if(textArea.css('display') == "block"){
        textArea.hide()
    }else{
        textArea.show()
    }
})

.multipleNameReq{
  display:block
}

<div>
  <div class="input-group mb-3">
      <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
      <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
  </div>
  <textarea class="form-control multipleNameReq"></textarea>
</div>
<div>
<div class="input-group mb-3">
    <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
    <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>

</div>

<div>
<div class="input-group mb-3">
    <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
    <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>

</div>
                
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Using toggle function

here below is simpler code using jquery toggle, here you can read about toggle

$('body').on('click', '.buttonMultipleNameReq',function(e){
    $(e.target).parent().parent().find('textarea').toggle();
})

<div>
  <div class="input-group mb-3">
      <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
      <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
  </div>
  <textarea class="form-control multipleNameReq"></textarea>
</div>
<div>
<div class="input-group mb-3">
    <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
    <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>

</div>

<div>
<div class="input-group mb-3">
    <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
    <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">hide/show</button>
</div>
<textarea class="form-control multipleNameReq"></textarea>

</div>
                
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Answer 2

To access and change the style of an element you need to use the css function.

$('body').on('click', '.buttonMultipleNameReq', function() {
  const element1 = $(this);
  const target1 = element1.parent().parent().find("#multipleNameReq");
  if (target1.css('display') === "none") {
    target1.css('display', "block");
  } else {
    target1.css('display', "none");
  }
})

<div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="input-group mb-3">
    <input type="text" name="tname[]" class="form-control" required placeholder="req. for">
    <button class="btn btn-outline-secondary buttonMultipleNameReq" type="button" id="button-addon2">Click<i class="bi bi-plus-circle"></i></button>
  </div>
  <textarea class="form-control" id="multipleNameReq" style="display: block;"></textarea>
</div>

Answer 3

Since you're using jQuery you could use it's syntax:

To get element: $('#multipleNameReq');

To Check if element is visible and not hidden: $('#multipleNameReq').is(":visible");

To Show: $('#multipleNameReq').show();

To Hide: $('#multipleNameReq').hide();

A solution to add into your click function would look like:

 if ($('#multipleNameReq').is(":visible")) {
    $('#multipleNameReq').hide();
 } else {
    $('#multipleNameReq').show();
 }