Future UI Tip ✨ You can create an HTML && CSS only Accordion that only has one section open at a time 🤙 Do this by adding a matching name attribute to sibling details elements ✨ One Two Check this video where the sibling elements have their name attributes... toggled 👇 Notice how the behavior changes. This is a pretty sweet addition from the Open UI group 👏 One issue is getting CSS transitions to work with the sections which seems like an age-old problem with many articles around it. Seems like it should work with @ starting-style or View Transitions 🤔 But, no luck on my end 🥲 CodePen.IO link below! 👇show more

Here's that @CodePen link! 🚀 You'll need to be in Chrome Canary to see this working as expected ⭐️ But, without it, you'll get the standard details && summary behavior.

As for the @openuicg work around this Accordion behavior, here's the explainer 👇 Been cool to have a poke around and catch up with some of this stuff this week 🤙

Man I’ve been living in my old havbits, wth is a details element? @chriscoyier I need my daily web blogs back 🥹

Heh – It's a "disclosure" element, think "Collapsible section" that's HTML only. This new pattern provides an out-of-the-box solution for only having one open at a time which is something people often progressively enhance with JavaScript to achieve 🤙 We will get the blog site up and running 🙏

Super interesting after our chat, didn’t know this was a proposal, never mind shipping. One thing that is interesting after our conversation is whether we will need a wrapper with role=“group”, as that might get built in? I see no mention of that but I haven’t dug deep yet. 💗

The introduction of a name attribute would likely provide an implicit grouping. But Adrian's solution of providing the section is likely still a good practice as you'll likely want to provide a header or something like "FAQ" for example 🤔

I’ve been doing this for a while with pure HTML/CSS but using the old radio hack 😉

Yeah, the only issue with the hacks is the accessibility implications of introducing things like a radio button etc. which could lead to confusion for a user if they aren't labelled correctly etc. I've seen some hacks with the content outside of the details element and that defeats the point of using the disclosure element in the first place 😅

Hi Jhey, I am a mid senior level front end dev, I work on Next js and improve my skills around front end. With image and videos conversion to a working app. Do you think front end roles will still be relevant? And what should I do stay relevant.

They will totally be relevant IMO 💯 These new tools are incredible and I think the opportunities they create are exciting. For me, this means more time and space for innovation. A lot of these tools in their current state are also primarily creating foundations to be built upon.