{"podcast":{"title":"No Script Show","slug":"no-script-show-6719676","podcast_index_feed_id":6719676,"rss_url":"https://feeds.hubhopper.com/9698ac00a8141974e116d9298f9f87c8.rss","website_url":"https://noscript.show","image_url":"https://files.hubhopper.com/podcast/435589/1400x1400/no-script-show_6619.jpeg?v=1746635814766366780","author":"Nathan Wrigley, David Waumsley","episode_count":31,"summary":"A show for people who build websites. A podcast on modern frontend web design where we look at what we can build today with minimal dependencies and skills. We're building this website as part of the show.","last_synced_at":null,"page_url":"https://stenobird.com/podcast/no-script-show-6719676"},"episode":{"title":"Ep20. Website accordions the good the bad and the ugly","slug":"ep20-website-accordions-the-good-the-bad-and-the-ugly","published_at":"2025-06-11T12:40:17+00:00","page_url":"https://stenobird.com/podcast/no-script-show-6719676/ep20-website-accordions-the-good-the-bad-and-the-ugly","show_page_url":"https://stenobird.com/podcast/no-script-show-6719676","url":"https://listen.hubhopper.com/episode/ep20-website-accordions-the-good-the-bad-and-the-ugly/32894042","audio_url":"https://play.hubhopper.com/28f59fa51fa59abcfe95a4c3d1bcd0d5.mp3?s=rss-feed&v=429f0020a1fd","summary":"On the podcast today we have the usual suspects - Nathan Wrigley and David Waumsley. This is the first in a new series where Nathan and David take a deep dive into different website components - today’s focus is on accordions. You know the ones: those hide-and-show sections you often see on FAQ pages, product details, or anywhere there’s a need to tidy up lots of information into collapsible panels. But what makes an accordion actually a good solution for your site, and when does it start to get in the way? Nathan and David kick things off by defining what an accordion is (with a nod to the UX authorities and the W3C) - and clarifying, with a bit of humour, what does and does not count as an accordion out in the wild. They look at the types of accordions - exclusive, non-exclusive, and toggle - and discuss how these patterns got established in web design. They also reflect on their own use (and sometimes overuse) of accordions in client work, especially handy within page builders, and how their thinking has changed as the web’s evolved. Then it’s onto the technical side: the code needed. David explains why, until recently, JavaScript was essential for accessible accordions, but now, thanks to advances in HTML (details and summary elements), CSS (with exciting new features like interpolate size), and improved browser support, you can build robust accordions without a single line of JavaScript - plus some important gotchas and accessibility considerations to watch for. They round things off by discussing when accordions add value - helping reduce overwhelm and improve scanability (is that a word?!) - and when they can cause problems, like increasing \"interaction cost,\" fragmenting information, or raising accessibility and SEO concerns. There are design details to conside…","meta_description":"On the podcast today we have the usual suspects - Nathan Wrigley and David Waumsley. This is the first in a new series where Nathan and David take a deep…","key_points":[],"chapters":[],"topics":[],"duration_seconds":1814,"processing_state":"not_requested","actions":[{"name":"request_transcript","method":"POST","url":"https://stenobird.com/v1/public/podcasts/no-script-show-6719676/episodes/ep20-website-accordions-the-good-the-bad-and-the-ugly/transcription-requests","description":"Idempotently request low-priority transcript generation for this episode."},{"name":"read_markdown","method":"GET","url":"https://stenobird.com/podcast/no-script-show-6719676/ep20-website-accordions-the-good-the-bad-and-the-ugly.md","description":"Read the agent-friendly Markdown representation of this episode resource."}]}}