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
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";
}
})
3
Answers
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:
To access and change the style of an element you need to use the
css
function.the accepted answer will work fine for nonduplicate
id
oftextarea
or any otherelements
, but as you have shown in your image if you want to work this for multipletextarea
or anyelements
I suggest you use theclass attribute
instead of theid attribute
, here is the explanation for why to not use same id multiple times,here below is some piece of code that may help you to get what are you looking for
Using toggle function
here below is simpler code using jquery toggle, here you can read about
toggle