how can i use a single handler to hide or show multiple HTML elements
Welcome seunawonugba! Can you be more specific about what you’re looking for here? Do you mean use a single handler multiple times? Or one handler once to hide/show multiple elements at the same time? Or something else…?
ok i want to be able to handle an event for multiple elements like i want a single event handler that will hide and show HTML elements
i just want a single event listener tied to a single event handler that hides and shows the #answer when the #question is clicked
e.g i have an HTML code here
<aside id="parentContainer">
<div id = "questions" >
<p>How many team members can I invite?</p>
</div>
<p id="answer">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
<div id = "questions" >
<p>What is the maximum file upload size?</p>
</div>
<p id="answer">No more than 2GB. All files in your account must fit your allotted storage space.</p>
<div id = "questions" >
<p>How do I reset my password?</p>
</div>
<p id="answer">Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p>Ok I think I get what you’re after. The clarification helped (it was not what I was expecting at all 
).
So basically what you’ll want to do is have one listener on the parent element. Then, when a click happens, you check to see if the click was for a question, and if so, find the answer below it and toggle its visibility.
Now one problem you have is that you’re using ids more than once. id values should be unique, so instead of ids you should use classes. That means questions and answers should be defined as
<aside id="parentContainer">
<div class="questions">
<p>How many team members can I invite?</p>
</div>
<p class="answer">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
<div class="questions">
<p>What is the maximum file upload size?</p>
</div>
<p class="answer">No more than 2GB. All files in your account must fit your allotted storage space.</p>
<div class="questions">
<p>How do I reset my password?</p>
</div>
<p class="answer">Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p>
</aside>
parentContainer can stay as an id assuming its the only one.
Now, for the code, you add the listener to parentContainer, then include the logic to check for a question clicked and then find and toggle the related answer. That would look something like:
const parent = document.getElementById('parentContainer');
parent.addEventListener('click', event => {
const question = event.target.closest('.questions');
if (question) {
const answer = question.nextElementSibling;
answer.style.display = answer.style.display === 'none' ? '' : 'none';
}
});
This assumes the answers start out revealed (display===’’), then the first time their clicked, they’re hidden (display===‘none’). If you want to start the answers hidden, you can given them a style attribute with display set to none like so
<p id="answer" style="display: none">...</p>
It also assumes answer will always be right after the question. If there’s ever something else in between, you’d have to update how the answer is found rather than just checking for the next element.
