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
,

Why a Filter Button Can Highlight but Not Actually Filter Anything

Field Note #119
🔬 Generalized 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience
You click a category tab or filter pill. It visibly highlights — so something is responding. But the list underneath doesn’t change. Nothing hides, nothing narrows.
This usually isn’t a JavaScript bug. The click is working. Something else is winning the argument over what’s visible.

What’s actually happening
A common pattern for building filters is: JavaScript sets an inline style directly on each item (display: none to hide it, nothing to show it). That normally works — inline styles are supposed to override a stylesheet.
But if your site’s theme has its own CSS rule targeting those same items with !important, that rule outranks the inline style regardless of order. The JavaScript successfully tries to hide the item — the browser just refuses, because the theme’s rule is marked as non-negotiable.

How to tell the difference
Open dev tools (right-click → Inspect) on an item that should be hidden but isn’t. Look at the Styles panel. If you see a display property from your theme’s stylesheet with a strikethrough and another display: none from an inline style also struck through, that’s the tell — both are fighting, and the !important one is winning.

The fix
Instead of setting the hide/show state as an inline style, toggle a CSS class instead — one that carries its own !important in your stylesheet. A class-based rule can out-rank a theme’s !important the same way the theme’s rule out-ranked your inline style. Swap the logic from “set display directly” to “add or remove a class,” and define that class’s hidden state with !important in your CSS.

Tagged in :

,

More from the field