Toggling UI pieces is a daily task for frontend developers. Think dropdowns, modals, feature flags, skeleton loaders, responsive navigation, and progressive disclosure. The community often debates the best way to hide or show content while keeping UX smooth and accessible.<\/p>\n\n\n\n
How can conditional visibility be used when elements need to \u201cshow\u201d or \u201chide\u201d in CSS?<\/em> Great question. There are several reliable patterns for conditional visibility, each with trade-offs. Below is a quick guide, followed by examples you can use in production.<\/p>\n\n\n\n Since height is often unknown, combine opacity with a large max-height for a smooth collapse.<\/p>\n\n\n For more layout and scaling tactics, see this guide on scaling elements with CSS<\/a>.<\/p>\n\n\n\n If you need to animate out then set display: none, use a two-step sequence: remove the open class to start the transition, listen for When content visibility depends on viewport or state, you can delay or conditionally load media. Use responsive URLs and lazy loading, and serve only what is needed. Cloudinary helps by producing fast, right-sized assets and by providing predictable image URLs you can swap as states change. For general performance strategy, see this optimization overview<\/a>.<\/p>\n\n\n Combine the earlier visibility classes with responsive images and conditional loading in your app logic.<\/p>\n\n\n\n
I want to implement robust show and hide behavior for things like menus, accordions, and modals. I know about display, visibility, and opacity, but I am not sure when to use which approach, how to animate the transitions cleanly, and how to keep everything accessible. Are there CSS-only patterns I should know, and what are the gotchas for layout, focus, and performance?<\/em><\/p>\n\n\n\nAnswer:<\/h2>\n\n\n\n
Pick the right visibility strategy<\/h3>\n\n\n\n
\n
visibility: visible<\/code> with opacity for nicer fades.<\/li>\n\n\n\npointer-events: none<\/code> and focus order. Good for fade animations, but make sure to trap focus correctly for modals.<\/li>\n<\/ul>\n\n\n\nCommon patterns with code<\/h3>\n\n\n\n
1) Class-based toggle with display for instant hide<\/em><\/h4>\n\n\n
<button<\/span> id<\/span>=\"toggle\"<\/span>><\/span>Toggle panel<\/button<\/span>><\/span>\n<div<\/span> id<\/span>=\"panel\"<\/span> class<\/span>=\"is-hidden\"<\/span>><\/span>Content<\/div<\/span>><\/span>\n\n<style<\/span>><\/span>\n\u00a0 .is-hidden<\/span> { display<\/span>: none; }\n<\/span><\/style<\/span>><\/span>\n\n<script<\/span>><\/span>\n\u00a0 const<\/span> btn = document<\/span>.getElementById('toggle'<\/span>);\n\u00a0 const<\/span> panel = document<\/span>.getElementById('panel'<\/span>);\n\u00a0 btn.addEventListener('click'<\/span>, () => panel.classList.toggle('is-hidden'<\/span>));\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n2) Animated show or hide with opacity and max-height<\/em><\/h4>\n\n\n\n
<style<\/span>><\/span>\n\u00a0 .collapse<\/span> {\n\u00a0 \u00a0 overflow<\/span>: hidden;\n\u00a0 \u00a0 max-height<\/span>: 0<\/span>;\n\u00a0 \u00a0 opacity<\/span>: 0<\/span>;\n\u00a0 \u00a0 transition<\/span>: max-height 250ms<\/span> ease, opacity 200ms<\/span> ease;\n\u00a0 }\n\u00a0 .collapse<\/span>.is-open<\/span> {\n\u00a0 \u00a0 max-height<\/span>: 1000px<\/span>; \/* large enough to fit content *\/<\/span>\n\u00a0 \u00a0 opacity<\/span>: 1<\/span>;\n\u00a0 }\n<\/span><\/style<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"collapse\"<\/span> id<\/span>=\"faq\"<\/span>><\/span>Answer goes here...<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n3) CSS-only toggle with checkbox + :checked<\/em><\/h4>\n\n\n
<input<\/span> id<\/span>=\"nav-toggle\"<\/span> type<\/span>=\"checkbox\"<\/span> hidden<\/span>><\/span>\n<label<\/span> for<\/span>=\"nav-toggle\"<\/span>><\/span>Menu<\/label<\/span>><\/span>\n<nav<\/span> class<\/span>=\"drawer\"<\/span>><\/span>...<\/nav<\/span>><\/span>\n\n<style<\/span>><\/span>\n\u00a0 .drawer<\/span> { transform<\/span>: translateX<\/span>(-100%<\/span>); transition<\/span>: transform 200ms<\/span> ease; }\n\u00a0 #nav-toggle<\/span>:checked<\/span> + label<\/span> + .drawer<\/span> { transform<\/span>: translateX<\/span>(0<\/span>); }\n<\/span><\/style<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n4) Use details and summary for accessible disclosure<\/em><\/h4>\n\n\n
<details<\/span>><\/span>\n\u00a0 <summary<\/span>><\/span>More options<\/summary<\/span>><\/span>\n\u00a0 <div<\/span>><\/span>Hidden content becomes visible when opened.<\/div<\/span>><\/span>\n<\/details<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n5) Responsive show and hide with media queries<\/em><\/h4>\n\n\n
<style<\/span>><\/span>\n\u00a0 .desktop-only<\/span> { display<\/span>: none; }\n\u00a0 @media<\/span> (min-width:<\/span> 768px<\/span>) {\n\u00a0 \u00a0 .desktop-only<\/span> { display<\/span>: block; }\n\u00a0 }\n<\/span><\/style<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"desktop-only\"<\/span>><\/span>Visible on tablets and up<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nAccessibility and UX tips<\/h3>\n\n\n\n
\n
aria-hidden=\"true\"<\/code> or move focus appropriately. When showing a modal, trap focus inside; when closing, return focus to the trigger.<\/li>\n\n\n\nprefers-reduced-motion<\/code> to minimize animation for motion-sensitive users.<\/li>\n\n\n\npointer-events: none<\/code> or by removing them from the DOM via display: none<\/code>.<\/li>\n\n\n\nHandling JavaScript-driven animations cleanly<\/h3>\n\n\n\n
transitionend<\/code>, then apply the hidden class.<\/p>\n\n\n\/\/ triggers fade-out<\/span>\n\npanel.classList.remove('is-open'<\/span>);\u00a0\n\npanel.addEventListener('transitionend'<\/span>, function<\/span> onEnd<\/span>(e<\/span>) <\/span>{\n\u00a0 if<\/span> (e.propertyName !== 'opacity'<\/span>) return<\/span>;\n\u00a0 panel.classList.add('is-hidden'<\/span>);\n\u00a0 panel.removeEventListener('transitionend'<\/span>, onEnd);\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nCloudinary angle: conditionally show images efficiently<\/h3>\n\n\n\n
<img\n\u00a0 src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_600,c_fill,q_auto,f_auto\/sample.jpg\"<\/span>\n\u00a0 alt=\"Hero\"<\/span>\n\u00a0 loading=\"lazy\"<\/span>\n\u00a0 class<\/span><\/span>=\"is-hidden\"<\/span>><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nQuick decision reference<\/h3>\n\n\n\n
\n