I need the functionality where, when a user clicks on an input type="checkbox", a corresponding textarea is displayed. Then, if the user clicks anywhere except for that specific textarea, it should be hidden. Can someone assist me with implementing this feature? Any suggestions or solutions would be greatly appreciated. Thank you in advance for your help.
var requiredDescription = document.querySelectorAll(".required-description");
requiredDescription.forEach(item => {
item.addEventListener('click', function(){
item.classList.toggle('active');
});
});
window.addEventListener("click", function(event){
var desText = document.querySelector('input.active');
if (event.target !== desText) {
description.classList.remove('show');
}
});.items{
border: 1px solid var(--txt);
padding: .5rem;
border-radius: 10px;
}
p > span.label{
width: 30%;
display: block;
}
p > span.label-items{
width: 70%;
display: flex;
align-items: center;
justify-content: space-between;
}
p > span.label-items > lable.label-item{
display: flex;
align-items: center;
width: 100%;
}
.description{
border: 2px solid var(--c2);
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 20%;
top: 10%;
width: 50%;
z-index: 1;
padding: 1rem;
display: none;
}
p > span.label-items > label.label-item > input.active ~ .description{
display: block;
}<p class="items">
<span class="label">example1</span>
<span class="label-items">
<label class="label-item" for="Others">
<input type="checkbox" name="Others" id="Others" class="required-description">
Others
<textarea class="description" placeholder="Define who" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example2</span>
<span class="label-items">
<label class="label-item" for="Yes">
<input type="checkbox" name="Yes" id="Yes" class="required-description">
Yes
<textarea class="description" placeholder="Explain more" cols="50" rows="3"></textarea>
</label>
</span>
</p>
<p class="items">
<span class="label">example3</span>
<span class="label-items">
<label class="label-item" for="ok">
<input type="checkbox" name="ok" id="ok" class="required-description">
Yes
<textarea class="description" placeholder="Define" cols="50" rows="3"></textarea>
</label>
</span>
</p>