FAQ/"Toggle" HTML

[mconway4]

I found the HTML (below) for an FAQ set up (students can click the question and the answer pops up below it), which I like. However, when you click one question, all of the questions/answers expand. Is there a way to adjust this so only the one answer shows up, rather than all of them? Thank you!

<h4><span class="element_toggler btn btn-primary" aria-controls="instructions" aria-label="Toggler toggle list visibility" aria-expanded="false"> What are Dr. C's contact information and office hours?</span></h4>
<ul id="instructions" style="list-style: none; display: none;">
<li>
<p>ANSWER</p>
<p>ANSWER</p>
<p>ANSWER</p>
</li>
</ul>
<h4><span class="element_toggler btn btn-primary" aria-controls="instructions" aria-label="Toggler toggle list visibility" aria-expanded="false"> What classroom are we in and what days/times do we meet?</span></h4>
<ul id="instructions" style="list-style: none; display: none;">
<li>
<p>ANSWER</p>
<p>ANSWER</p>
</li>
</ul>

[James]

 @mconway4 ,

I'm not familiar with this particular code, but it is not valid in a way that would explain what you're seeing. You are reusing the id="instructions" multiple times within a page and that is a violation of the standard. Each id must be unique and appear only once.

Instead of using "instructions" for all of them, try instructions1, instructions2, instructions3, ...

You will need to change it two places for each list. In the span element, you will need to change the aria-controls attribute to match the id attribute of the ul element. Make sure the aria-controls goes with the next id, otherwise it would toggle a different section and be really confusing.

[manuelgarciaph]

It would be helpful if you will disclose more details regarding the code. Are you using a framework? a library? a built-in tool? Do you want it to be pure HTML/CSS? Or is it okay to use a simple JavaScript to achieve such effect? There's so many way to achieve what you want but is fairly simple. In the meantime, here's a revised code based from yours:

<h4><span class="element_toggler btn btn-primary" aria-controls="contact" aria-label="Toggler toggle list visibility" aria-expanded="false"> What are Dr. C's contact information and office hours?</span></h4>
<ul id="contact" style="list-style: none; display: none;">
   <li>ANSWER</li>
   <li>ANSWER</li>
   <li>ANSWER</li>
</ul>

<h4><span class="element_toggler btn btn-primary" aria-controls="classroom" aria-label="Toggler toggle list visibility" aria-expanded="false"> What classroom are we in and what days/times do we meet?</span></h4>
<ul id="classroom" style="list-style: none; display: none;">
   <li>ANSWER</li>

   <li>ANSWER</li>

   <li>ANSWER</li>
</ul>

By the way, I corrected your list structure. Let me know if you need more help.

[Chris_Hofer]

Hello @mconway4 ...

I just posted a reply to a similar question...which may find of interest...

Hidden Answers for Clickable Questions

Hopefully this will be of some help to you.  Please let Community members know if you have any other questions about this...thanks!  Take care, stay safe, and be well.

[parm]

Hello,

The aria id needs to be different for each toggle item. So for example for the second toggle code, you can call the aria-controls="instructions2" and use id="instructions2" in the code and they function as two separate toggles.