Highlighted
Community Member

FAQ/"Toggle" HTML

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>

0 Kudos
2 Replies
Highlighted
Navigator

mconway@western.edu,

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.

0 Kudos
Highlighted
Surveyor

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.

352524_1.png

0 Kudos
Labels