ShowHide Techniques for JavaScript Developers
Effective show/hide behavior is a core UI pattern for web apps: it saves space, reduces cognitive load, and lets users reveal details on demand. This article covers practical techniques, accessibility considerations, and performance tips for implementing show/hide in JavaScript.
1. Choose the right method for your use case
- display: none / block — Removes element from layout. Use for simple toggles where layout collapse is desired.
- visibility: hidden / visible — Keeps layout space but hides content. Use when preserving layout is important.
- opacity + pointer-events — Smooth transitions without layout shifts; combine with transform for better performance.
- height / max-height animations — Useful for accordion-like reveals; use max-height with a known max to animate height smoothly.
- CSS classes + JavaScript — Toggle classes that control visibility and transitions rather than manipulating styles inline.
2. Basic toggle examples
- Simple display toggle
javascript
const el = document.getElementById(‘panel’); function toggle() { el.style.display = (el.style.display === ‘none’) ? ‘block’ : ‘none’; }
- Class-based toggle with transitions
css
.panel { max-height: 0; overflow: hidden; transition: max-height 300ms ease; } .panel.open { max-height: 500px; }
javascript
el.classList.toggle(‘open’);
3. Smooth transitions
- Prefer animating transform and opacity for GPU-accelerated, smoother animations.
- For height-based transitions, animate max-height with a sensible limit or compute height dynamically:
javascript
function open(el) { el.style.maxHeight = el.scrollHeight + ‘px’; } function close(el) { el.style.maxHeight = “; }
4. Accessibility (a11y)
- Use ARIA attributes: set aria-hidden=“true” when content is hidden; update aria-expanded on the control.
- Ensure hidden content is removed from the tab order: use inert (where supported) or manage focus manually.
- Provide visible focus styles for toggle controls and ensure toggles are keyboard operable (Enter/Space).
Example:
html
<button aria-expanded=“false” aria-controls=“details” id=“toggle”>Details</button> <div id=“details” aria-hidden=“true”>…</div>
javascript
toggle.addEventListener(‘click’, () => { const open = toggle.getAttribute(‘aria-expanded’) === ‘true’; toggle.setAttribute(‘aria-expanded’, String(!open)); details.setAttribute(‘aria-hidden’, String(open)); details.classList.toggle(‘open’); });
5. Performance considerations
- Batch DOM reads/writes to avoid layout thrashing.
- Use CSS classes and transitions instead of frequent inline style changes.
- Debounce rapid toggles if necessary to prevent heavy reflows.
6. State management patterns
- For small apps, keep state on the element via ARIA attributes or data-* attributes.
- For larger apps, manage visibility state in your framework/store (React/Vue/Redux) and let the view layer handle the DOM.
React example:
jsx
const [open, setOpen] = useState(false); return <> <button aria-expanded={open} onClick={() => setOpen(o => !o)}>Toggle</button> <div hidden={!open} aria-hidden={!open}>Content</div> </>;
7. Advanced patterns
- Lazy-render hidden content to reduce initial load (render on first open).
- Animated height with ResizeObserver to handle dynamic content size changes.
- Coordinated animations for complex UIs using the Web Animations API.
8. Testing
- Unit-test visibility logic and ARIA attribute updates.
- Use accessibility testing tools (axe, Lighthouse) and keyboard-only navigation tests.
9. Common pitfalls
- Relying only on visibility without updating ARIA — inaccessible to assistive tech.
- Animating layout-heavy properties frequently — causes jank.
- Forgetting to remove event listeners on destroyed components.
10. Quick checklist before shipping
- Keyboard operable controls (Enter/Space)
- Correct ARIA attributes (aria-expanded, aria-hidden)
- Focus management for revealed content
- Smooth, performant animations
- Tests covering visibility and accessibility
Implement show/hide thoughtfully: choose appropriate CSS strategies, keep accessibility central, and manage state predictably. These techniques will help you build responsive, usable, and performant toggles in JavaScript.