Product tab feature

Technical Q&A

Topic summary

Need to modify product tabs so only one tab is open at a time (accordion behavior). Currently, opening tab B leaves tab A expanded; desired behavior is that opening one tab auto-closes the others.

Context: The theme support indicated the fix belongs in a specific file but didn’t provide the code. The requester shared a Liquid file link and screenshots illustrating multiple tabs expanded simultaneously. Accordion = UI pattern where expanding one section collapses the rest.

Solution: A responder advised adding JavaScript to the accordion_information.liquid file to enforce single-open (accordion) behavior. The exact code isn’t visible in the transcript.

Outcome: The requester confirmed the fix works perfectly after applying the suggested code.

Status: Resolved. No remaining questions. Images were used to depict the initial issue; the precise code snippet is not included in the thread text.

Summarized with AI on December 24. AI used: gpt-5.
1

Hi professional,

I am using product tab feature

But I want to change 1 thing

When I open product tab A, then open product tab B, the product tab A still expand together product tab B. Like shown in the picture

I want when I click product tab B, the product tab A will be automatically close. It only show 1 product tab at 1 time

Then the theme supporter tell me to fix this in this file but doesn’t tell me what code I should replace. Here is the liquid file https://pastebin. pl/view/5da040f6

Can you check and help me?

Thanks a lot

amfintl_0-1721654691896.png
amfintl_0-1721654691896.png2496×1402 283 KB

amfintl_1-1721654704617.png
amfintl_1-1721654704617.png1672×812 222 KB

2

Hi @amfintl
You can achieve this by putting the below code in the file accordion_information.liquid file

Thank you.

DP

1 Like
3

Thank you sir, it works perfectly :heart_eyes:

1 Like