How to create separate FAQ sections on a webpage?

Topic summary

A user is experiencing an issue with multiple FAQ sections on their webpage. They’ve created separate FAQ sections with descriptions, but when attempting to open FAQ items in different sections, only the first section’s items expand.

Solution provided:

  • Assign unique IDs to each FAQ item’s input and label elements
  • Change the id attribute in the input field (e.g., id="faq_checkbox_3")
  • Update the corresponding for attribute in the label to match (e.g., for="faq_checkbox_3")

This ensures each expandable FAQ item targets the correct element independently. A screenshot was shared demonstrating the implementation.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.

Hi all,

I wanted to see if you can help me again. on my faq page I created an faq sections so I can separate my faqs to add descriptions to each one. But now when I create a new section on the page when I try to open the next faq item it opens the first sections faq items. I need these to open separately.

https://coast-to-coast-coffee-6268.myshopify.com/pages/faqs

@c2ccoffee You have to assign the unique id in input and label to target particular expand tabs.

just change the input id=“faq_checkbox_3” or in the label please change for=“faq_checkbox_3”