Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support

When an Accordion Opens But Never Closes, and No Error Appears Anywhere

Field Note #174
🔬 Resolved 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience

⚡ Quick Fix (TL;DR)

The Fix: 1. Compare every class name referenced in the JavaScript against the actual class names used in the HTML markup, character by character. A single-letter typo in a class name inside a `querySelector` call will not produce any error.
2. Remember that `querySelector`/`querySelectorAll` matching zero elements is a silent no-op, not a failure state the browser will ever flag.
3. If part of a function's logic seems to be "missing" (like a reset or close step), check whether that step is actually running but simply matching nothing.

Rather not untangle this yourself? Our Done-For-You team handles exactly this kind of thing, start to finish.
See DFY options →
Was this helpful? Thanks for the feedback!
The symptom
An FAQ accordion’s items would open correctly when clicked, but clicking an already-open item did not close it, and opening a new item did not close a previously opened one. Multiple items could end up open simultaneously.

Initial assumption
The first instinct was that this must be a CSS transition or max-height issue, since the visible symptom was about open/closed state not behaving correctly.
 
That assumption was wrong — the CSS was fine. The bug was in the JavaScript’s selector string.

Investigation
The toggle function computed whether the clicked item was already open, then tried to close *all* currently-open items before deciding whether to re-open the clicked one. The “close all open items” step used `document.querySelectorAll(‘.zlh-faq-item.open’)` — but the actual class used throughout the page’s markup was `.zlk-faq-item`, not `.zlh-faq-item`.
 
Because `querySelectorAll` with a selector that matches nothing simply returns an empty list — it does not throw an error — this typo failed completely silently. The “close open items” step ran every time, matched zero elements, and did nothing, while the rest of the toggle logic continued to execute as if that step had worked.

What to check
When a toggle, filter, or “close others” pattern isn’t behaving correctly but no console error appears:
 
1. Compare every class name referenced in the JavaScript against the actual class names used in the HTML markup, character by character. A single-letter typo in a class name inside a `querySelector` call will not produce any error.
2. Remember that `querySelector`/`querySelectorAll` matching zero elements is a silent no-op, not a failure state the browser will ever flag.
3. If part of a function’s logic seems to be “missing” (like a reset or close step), check whether that step is actually running but simply matching nothing.

Current finding
The fix was correcting the single mismatched class name in the selector string so it matched the class actually used in the markup.

Troubleshooting lesson
A mismatched selector is one of the easiest bugs to miss precisely because it fails without any error message. When a piece of toggle or reset logic in a script appears to be silently doing nothing, check the exact selector string against the real markup before assuming the logic itself is wrong.

Tagged in :

More from the field