FAQs could not open properly

[peddiy_yang]

I use the free FAQs section downloaded from Shopify section store. But not all FAQs questions could be open properly.

Has anyone run into this issue before? Is there something in the code that needs to be looked at?

Here is a link to the page: https://peddiy.com/pages/faqs

Thank you!

[Darshanp712]

Hello @peddiy_yang, I see that all the FAQs work fine with the first 1 FAQ of Photo Questions and others are not working. The reason is that in this FAQ the input tags attribute "id" is getting duplicated(repeated) with all the blocks of the FAQ input and also the input label attribute "for" which changes with the "id" of input. It must be unique for all the input "id" and according to "id" also input label attribute is the same as that. Please make these attributes unique.

Please see the screenshot below. I set the attribute of input "id=tab11" and label attribute "for=tab11" and it works fine!!

Feel free to reach out if you have any questions or need assistance.

Best regards,

Darshan

[Keshan97]

Hi there,

I took a look at your FAQ page and noticed a couple of issues that might be causing the problem:

1. Duplicate ID Attributes: It looks like some elements on your page are using the same ID attribute. IDs should be unique for each element to function correctly. Check your code to ensure each FAQ item has a unique ID.

2. Use of Input Elements: It appears you are using input elements for your FAQ sections. While this might work, it’s not the best practice. Consider using <button> elements or other semantic HTML elements that are better suited for toggling content.

If you need further assistance with fixing these issues, feel free to let me know!

[tim · Accepted solution]

To expand the @Darshanp712 diagnosis -- here is the liquid part of your section code:

<div class="rb-faq-shopify-section">
    <h1 style="text-align: center; padding: 20px 20px 0px 20px;"> {{ section.settings.heading }} </h1>
    <div class="rb-faq-container">
        {%for block in section.blocks %}
        <div class="rb-faq-container-item">
            <input style="display:none!important;" type="checkbox" id="tab{{forloop.index}}" class="tab-toggle">
            <label for="tab{{forloop.index}}" class="rb-faq-question">{{block.settings.question}}</label>
            <div class="rb-faq-answer">{{block.settings.answer}}</div>
        </div>
        {% endfor %}
    </div>
  </div>

Here is how need to modify it:

<div class="rb-faq-shopify-section">
    <h2 style="text-align: center; padding: 20px 20px 0px 20px;"> {{ section.settings.heading }} </h2>
    <div class="rb-faq-container">
        {%for block in section.blocks %}
        <div class="rb-faq-container-item">
            <input style="display:none!important;" type="checkbox" id="tab{{ section.id }}-{{forloop.index}}" class="tab-toggle">
            <label for="tab{{ section.id }}-{{forloop.index}}" class="rb-faq-question">{{block.settings.question}}</label>
            <div class="rb-faq-answer">{{block.settings.answer}}</div>
        </div>
        {% endfor %}
    </div>
  </div>

You're basically replacing tab{{ forloop.index }} with tab{{ section.id}}-{{ forloop.index }}. This will make your ids unique even if you add multiple FAQ sections on one page.

I've also replaced h1 with h2  (you do not want to have multiple H1 elements on a page).

You should add a separate section with H1 element at the top of the page 

[peddiy_yang]

thank you for your support!