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 a View All Button Shows All Cards But “Show Fewer” Never Appears

Field Note #179
🔬 Resolved 🟢 Beginner ⏱ 30 Minutes ✓ Observation from Experience

⚡ Quick Fix (TL;DR)

The Fix: 1. Confirm `SHOW` value is less than the total card count — otherwise the button never appears
2. Check whether the ViewAll function hides the button (`display: none`) after click — this breaks the toggle
3. Verify the button text updates on both expand and collapse states

Was this helpful? Thanks for the feedback!
The symptom
A “View All ” button correctly revealed hidden cards when clicked, but the button disappeared entirely instead of changing to “Show Fewer.” Visitors had no way to collapse the grid back to the default 8-card view.

Initial assumption
The ViewAll function needed to toggle button text alongside revealing cards.

Investigation
The original `ViewAll` function simply:
1. Removed the hidden class from all cards
2. Set `btn.style.display = ‘none’`
 
Step 2 was the problem — hiding the button after it was clicked gave no way back. The fix was converting the function to a toggle:
 
– If hidden cards exist → reveal all, change text to “Show Fewer”
– If no hidden cards → re-hide cards beyond SHOW limit, change text back to “View All Templates”
 
Also identified: the `SHOW` variable was set to `10` on a showcase with only 9 total cards. Since `9 < 10`, the button never appeared at all on initial load. Setting `SHOW = 8` fixed this — 8 cards show initially, the button appears to reveal the 9th.

What to check

1. Confirm `SHOW` value is less than the total card count — otherwise the button never appears
2. Check whether the ViewAll function hides the button (`display: none`) after click — this breaks the toggle
3. Verify the button text updates on both expand and collapse states

Troubleshooting lesson
A “View All” button that hides itself after clicking is a one-way door. The function needs to check the current state (are cards hidden or shown?) and toggle accordingly — including updating the button label to reflect the current state.

Tagged in :

,

More from the field