Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jhey ʕ•ᴥ•ʔ

146,397 subscribers

51,166 views • 1 year ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Nine1 year ago

Can you make a css based ui library called jhey/ui

Alexis Morin1 year ago

What version of Chrome will have support for the ::details-content pseudo-element?

mh1 year ago

Probably going to be a while until this is useful, right?

Eugene Korchagin1 year ago

God Are you magician?

Gustav Ekerot1 year ago

where's the npm package jhey!? seriously though, would be cool with a css-only based component lib, copy paste á la shadcn

Sudhansu Bhushan Mishra1 year ago

Thank you for sharing this codepen

👑 Satoshi 16px1 year ago

You inspire me man!! Its crazy what you do with Css

Manu | UX UI Designer1 year ago

Nice!!!!

Facundo Muoio1 year ago

Wow! Men, it is so pretty accordion. I would like to know where you learn these CSS skills.

Carlito1 year ago

Sorcery!

Related Videos

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

jhey ʕ•ᴥ•ʔ

216,567 views • 2 years ago

accordion transitions w/ css ::details-content, <details> + <summary> 🧑‍🍳 details:has(~ [open]) { --y: -1; } [open] ~ details { --y: 1; } details { translate: 0 calc(var(--y) * 1rem); } [open]::details-content { height: fit-content; }

accordion transitions w/ css ::details-content, <details> + <summary> 🧑‍🍳 details:has(~ [open]) { --y: -1; } [open] ~ details { --y: 1; } details { translate: 0 calc(var(--y) * 1rem); } [open]::details-content { height: fit-content; }

jhey ʕ•ᴥ•ʔ

151,359 views • 9 months ago

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @starting-style { width: min(640px, 100vw - 2rem); }}

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @starting-style { width: min(640px, 100vw - 2rem); }}

jhey ʕ•ᴥ•ʔ

64,817 views • 1 year ago

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! 👇

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! 👇

jhey ʕ•ᴥ•ʔ

362,458 views • 2 years ago

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

jhey ʕ•ᴥ•ʔ

118,488 views • 10 months ago

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

jhey ʕ•ᴥ•ʔ

386,721 views • 10 months ago

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

319,234 views • 2 years ago

After the success of Pokédate, We are happy to announce that another route will be added to the game as Downloadable Content! Featuring the one and only Flame Pokémon, Charizard! See if you can crack open his volcanic heart and rough exterior. More details and screens below👇

After the success of Pokédate, We are happy to announce that another route will be added to the game as Downloadable Content! Featuring the one and only Flame Pokémon, Charizard! See if you can crack open his volcanic heart and rough exterior. More details and screens below👇

incineroar fan

147,823 views • 3 years ago

Tonight, on Real America w/ Dan Ball - TPUSA Frontlines Reporter & Content Creator Bo Alford Turning Point USA - TPUSA's Bo Alford just revealed the chilling details of the Saturday terror attempt at Gracie Mansion; is this the 'new normal' for America when leaders allow radical ideologies to take root in our greatest cities? Watch Real America on Spectrum and YouTube TV Today!

Tonight, on Real America w/ Dan Ball - TPUSA Frontlines Reporter & Content Creator Bo Alford Turning Point USA - TPUSA's Bo Alford just revealed the chilling details of the Saturday terror attempt at Gracie Mansion; is this the 'new normal' for America when leaders allow radical ideologies to take root in our greatest cities? Watch Real America on Spectrum and YouTube TV Today!

One America News

36,329 views • 5 months ago

real humans + AI editor = 200 UGC videos. $3/video. 2 minutes. DansUGC Content Factory waitlist is open. here's how it works: > upload 10 product demos > plugged into 3k b-rolls from dansugc > auto-generates 200 reaction + demo combos > real human hooks. ready to deploy. no briefing. no editing. no waiting. just 10 uploads and 200 videos. comment "content factory" and I'll send you more details. must be following so i can DM.

real humans + AI editor = 200 UGC videos. $3/video. 2 minutes. DansUGC Content Factory waitlist is open. here's how it works: > upload 10 product demos > plugged into 3k b-rolls from dansugc > auto-generates 200 reaction + demo combos > real human hooks. ready to deploy. no briefing. no editing. no waiting. just 10 uploads and 200 videos. comment "content factory" and I'll send you more details. must be following so i can DM.

daniel

23,776 views • 4 months ago

SonicScribe V1 is LIVE! We are excited to announce a true breakthrough in confidential audio data handling – SonicScribe is now available for all users! This revolutionary technology transforms how organizations work with sensitive audio content by: • Accurate Transcriptions – with automatic redaction of personal identifiers. • Smart Q&A – ask natural language questions and receive context-aware, privacy-preserving answers. • Providing answers – that preserve context while protecting privacy. • Safe Search – analyze content without ever exposing confidential details. For the first time, organizations handling confidential information can safely allow employees to perform critical tasks without privacy risks. Law firms can analyze case recordings, HR departments can process interview transcripts, and customer service teams can mine call data – all while sensitive details remain protected. This technology bridges a critical gap that has long existed in regulated industries. Now you can extract maximum value from confidential audio while maintaining complete compliance with privacy regulations. 👉 Try it now:

SonicScribe V1 is LIVE! We are excited to announce a true breakthrough in confidential audio data handling – SonicScribe is now available for all users! This revolutionary technology transforms how organizations work with sensitive audio content by: • Accurate Transcriptions – with automatic redaction of personal identifiers. • Smart Q&A – ask natural language questions and receive context-aware, privacy-preserving answers. • Providing answers – that preserve context while protecting privacy. • Safe Search – analyze content without ever exposing confidential details. For the first time, organizations handling confidential information can safely allow employees to perform critical tasks without privacy risks. Law firms can analyze case recordings, HR departments can process interview transcripts, and customer service teams can mine call data – all while sensitive details remain protected. This technology bridges a critical gap that has long existed in regulated industries. Now you can extract maximum value from confidential audio while maintaining complete compliance with privacy regulations. 👉 Try it now:

ZKCrypt AI

17,101 views • 1 year ago

🎮 Get Ready for GAP Season 8! Level up your gaming experience with an all-new roster featuring: - An expanded game roster with fresh titles - Groundbreaking new features and content - Exclusive partnerships with B3OS and HyperPlayGaming 🎬 Don't miss our latest teaser showcasing the incredible lineup of quest-ready games coming to Season 8. Which game has caught your eye? Drop a comment below and join the conversation! Launch details dropping soon – don't miss out! 🚀 #GAPS8 #TogetherWePlay #YGG #ComingSoon

🎮 Get Ready for GAP Season 8! Level up your gaming experience with an all-new roster featuring: - An expanded game roster with fresh titles - Groundbreaking new features and content - Exclusive partnerships with B3OS and HyperPlayGaming 🎬 Don't miss our latest teaser showcasing the incredible lineup of quest-ready games coming to Season 8. Which game has caught your eye? Drop a comment below and join the conversation! Launch details dropping soon – don't miss out! 🚀 #GAPS8 #TogetherWePlay #YGG #ComingSoon

Yield Guild Games

30,835 views • 1 year ago

🏝️ More Kuroro Wilds Content coming to you soon! As we are getting closer to launch of Kuroro Wilds, we will be sharing more details about this mysterious island! 👀 Sneak Peeks: Get a first look at the game's amazing features and gameplay! 🧠 Gameplay Deep Dives: Learn the ins and outs of Kuroro Wilds mechanics and strategies. ⚔️ Character Reveals: Meet the fascinating characters that will drive the story! 👑 Kuroro Showcase: Witness the power of Kuroro in action, discover their lore, and explore the Kuroropedia! 🚀 Want a head start? Follow Kuroro Wilds for exclusive content, tips, tricks, and more! #pixelart #game

🏝️ More Kuroro Wilds Content coming to you soon! As we are getting closer to launch of Kuroro Wilds, we will be sharing more details about this mysterious island! 👀 Sneak Peeks: Get a first look at the game's amazing features and gameplay! 🧠 Gameplay Deep Dives: Learn the ins and outs of Kuroro Wilds mechanics and strategies. ⚔️ Character Reveals: Meet the fascinating characters that will drive the story! 👑 Kuroro Showcase: Witness the power of Kuroro in action, discover their lore, and explore the Kuroropedia! 🚀 Want a head start? Follow Kuroro Wilds for exclusive content, tips, tricks, and more! #pixelart #game

kuroro beasts

47,787 views • 2 years ago

WhatsApp is working on a feature to share spoiler messages! The demo video is OUT! WhatsApp will make it easier for users to send messages that can hide sensitive content behind a blurred layer. The video shows the new formatting tool that will allow users to hide selected text as spoiler content before sending a message. Recipients would be able to tap the message to reveal the text. This would help people share messages without immediately exposing the details. The feature will also reduce accidental spoilers in group chats where not everyone wants to see the same information at the same time. It will be compatible with text messages and media captions. In the future, it may support photo and video content as well. The feature is under testing, and it will be available to beta testers soon.

WhatsApp is working on a feature to share spoiler messages! The demo video is OUT! WhatsApp will make it easier for users to send messages that can hide sensitive content behind a blurred layer. The video shows the new formatting tool that will allow users to hide selected text as spoiler content before sending a message. Recipients would be able to tap the message to reveal the text. This would help people share messages without immediately exposing the details. The feature will also reduce accidental spoilers in group chats where not everyone wants to see the same information at the same time. It will be compatible with text messages and media captions. In the future, it may support photo and video content as well. The feature is under testing, and it will be available to beta testers soon.

WABetaInfo

13,854 views • 3 months ago

Today we’re releasing OpenEQA — the Open-Vocabulary Embodied Question Answering Benchmark. It measures an AI agent’s understanding of physical environments by probing it with open vocabulary questions like “Where did I leave my badge?” More details ➡️ All of today’s state-of-art vision+language models (VLMs) fall well short of human performance. In fact, for questions that require spatial understanding, today’s VLMs are nearly “blind” – access to visual content provides only minor improvements over language-only models. We hope that OpenEQA motivates additional research into helping AI understand and communicate about the world it sees.

Today we’re releasing OpenEQA — the Open-Vocabulary Embodied Question Answering Benchmark. It measures an AI agent’s understanding of physical environments by probing it with open vocabulary questions like “Where did I leave my badge?” More details ➡️ All of today’s state-of-art vision+language models (VLMs) fall well short of human performance. In fact, for questions that require spatial understanding, today’s VLMs are nearly “blind” – access to visual content provides only minor improvements over language-only models. We hope that OpenEQA motivates additional research into helping AI understand and communicate about the world it sees.

AI at Meta

407,109 views • 2 years ago

Don’t stop talking about this California Democrat Mia Bonta introduced California Assembly Bill 2624, The Stop Nick Shirley Act Not only will it criminalize investigative journalism, IT CREATES SERVICES FOR IMMIGRANTS COMMITTING THE CRIMES The bill will create a new address confidentiality program for employees, volunteers, and providers working with immigration support services. Organizations helping immigrants, including daycare, learning centers, hospice, or other taxpayer-funded social services Holy crap…. - The bill prohibits posting or sharing on the internet the photo, personal information, or home address of these individuals with the intent to incite harassment, threats, or violence - Violations allow lawsuits for damages, injunctions to remove content and criminal penalties - Punishments include misdemeanor, fines up to $10,000, possible jail time, and court orders to delete content - It allow affected individuals or organizations to demand takedown of videos or posts that include their images/personal details, even if the recording happened in or around a public or semi-public facility The bill advanced out of the Assembly Judiciary Committee

Don’t stop talking about this California Democrat Mia Bonta introduced California Assembly Bill 2624, The Stop Nick Shirley Act Not only will it criminalize investigative journalism, IT CREATES SERVICES FOR IMMIGRANTS COMMITTING THE CRIMES The bill will create a new address confidentiality program for employees, volunteers, and providers working with immigration support services. Organizations helping immigrants, including daycare, learning centers, hospice, or other taxpayer-funded social services Holy crap…. - The bill prohibits posting or sharing on the internet the photo, personal information, or home address of these individuals with the intent to incite harassment, threats, or violence - Violations allow lawsuits for damages, injunctions to remove content and criminal penalties - Punishments include misdemeanor, fines up to $10,000, possible jail time, and court orders to delete content - It allow affected individuals or organizations to demand takedown of videos or posts that include their images/personal details, even if the recording happened in or around a public or semi-public facility The bill advanced out of the Assembly Judiciary Committee

Wall Street Apes

190,400 views • 4 months ago

American bought a Vizio Smart TV from Walmart. He took it home only to find you cannot use the TV without a Walmart account logged in You cent even turn it on and get past the first screen This is because Walmart bought Vizio and by having you sign in with your account they can like the data collected to you This TV collects everything and links it to your account - Contact details - Payment information - Subscription information - Account authentication and security information The optional data that most people just click next through is the really invasive data capturing, it includes - Viewing Data - Activity Data - Mobile App Data - Mobile Streaming Data It also uses built-in technology to analyze what’s playing on the TV in real time, including: - Audio and video programming, ads and gaming content - Content from connected devices like HDMI - Third-party apps like streaming services for movies, shows, episodes, channels, launch events - Device state details: volume, channel, picture controls, inputs, power on/off But it doesn’t stop there, it also collects - Basic identifiers: Name, email, phone, address, account credentials - Device/online identifiers: Device IDs, advertising IDs, IP/MAC addresses, model/serial numbers, firmware, Wi-Fi access points, cookies - Activity Data: Settings, inputs, clicks, impressions, operational/performance data, some content interaction details - Commercial/financial info: Purchases, subscriptions, warranties, payment cards - Internet/network activity: How you use the apps, sites, ads, and services - Mobile app and streaming data if you use the Vizio app You agree to have all this data collected from you just because you bought a TV…..

American bought a Vizio Smart TV from Walmart. He took it home only to find you cannot use the TV without a Walmart account logged in You cent even turn it on and get past the first screen This is because Walmart bought Vizio and by having you sign in with your account they can like the data collected to you This TV collects everything and links it to your account - Contact details - Payment information - Subscription information - Account authentication and security information The optional data that most people just click next through is the really invasive data capturing, it includes - Viewing Data - Activity Data - Mobile App Data - Mobile Streaming Data It also uses built-in technology to analyze what’s playing on the TV in real time, including: - Audio and video programming, ads and gaming content - Content from connected devices like HDMI - Third-party apps like streaming services for movies, shows, episodes, channels, launch events - Device state details: volume, channel, picture controls, inputs, power on/off But it doesn’t stop there, it also collects - Basic identifiers: Name, email, phone, address, account credentials - Device/online identifiers: Device IDs, advertising IDs, IP/MAC addresses, model/serial numbers, firmware, Wi-Fi access points, cookies - Activity Data: Settings, inputs, clicks, impressions, operational/performance data, some content interaction details - Commercial/financial info: Purchases, subscriptions, warranties, payment cards - Internet/network activity: How you use the apps, sites, ads, and services - Mobile app and streaming data if you use the Vizio app You agree to have all this data collected from you just because you bought a TV…..

Wall Street Apes

231,242 views • 1 month ago

NEWS: Google is rolling out AI-powered EV trip planning and battery predictions in Google Maps to over 350 car models with Android Auto. The update recommends when and where to charge based on your vehicle and battery level, showing estimated battery at arrival and adjusting ETAs with charging time, something that Tesla already does, but this Google Maps update will reduce the need for multiple apps in non-Tesla EVs. Google: "To deliver accurate battery predictions for hundreds of vehicles, we combine AI with advanced energy models that analyze car details — like weight and battery size — alongside Maps’ real-time information about traffic, road elevation and weather. This will allow us to bring intelligent trip-planning features to most U.S. EVs soon."

NEWS: Google is rolling out AI-powered EV trip planning and battery predictions in Google Maps to over 350 car models with Android Auto. The update recommends when and where to charge based on your vehicle and battery level, showing estimated battery at arrival and adjusting ETAs with charging time, something that Tesla already does, but this Google Maps update will reduce the need for multiple apps in non-Tesla EVs. Google: "To deliver accurate battery predictions for hundreds of vehicles, we combine AI with advanced energy models that analyze car details — like weight and battery size — alongside Maps’ real-time information about traffic, road elevation and weather. This will allow us to bring intelligent trip-planning features to most U.S. EVs soon."

Sawyer Merritt

153,054 views • 5 months ago

$How I turn my templates into real landing pages. Works for any vibe coding platform or site. This is my full guide. I start with Gemini 3. I copy the HTML code and paste to Cursor/v0/lovable and prompt "Create a new landing page /page-name using this design but adapted to {site_name}. Replace the header and footer with the ones from my site. Adapt the whole page, keep everything: {HTML_code}" Details that can to be adapted or improved: Fonts: "Use {font_name} Google font for headings and {font_name} for body text." Icons: "Use Iconify {icon_set} icons" Colors: "Change primary color to blue. Everything else should be monotone." Bonus: "Make the outlines subtle" for a cleaner design. Animation intro/on scroll: "Animate when in view observed, fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0." Static to animated: "Animate details with {animate_type} and decorations.". Example types: line, beam animation, noodles, grid, sonar, etc. Background animation: "Apply the background animation using Unicorn Studio {animation_code}" Details to make your layout stand out: "Add vertical container-size lines. Add 01 02 03 number details." Stand out from generic-looking: "Make this more upscale with large tall fonts, Newsreader font and black and white agency". Adapt content: "Adapt the content to {copy and paste site texts}". Buttons: "Change main button to {code}. Add a 1px border beam animation around the pill-shaped button on hover." Adding sections like testimonials: "Adapt a new section after {section} using this code: {component code}". You can copy the code from Codepen, 21st dev or Aura. Responsiveness: "Make this responsive. Add a hamburger menu for mobile. Hide this {element} for mobile." Making forms work: "Make the form send an email to {your_email}". Payments: "Link the buy button to {LemonSqueezy payment link}". I use composer-1 for quick fixes. I finish with Claude Opus 4.5 for code reviews "Please review the code for performance and robustness". The template HTML code should give you a blueprint for all these, but I think it's important to keep iterating for your specific site.$

How I turn my templates into real landing pages. Works for any vibe coding platform or site. This is my full guide. I start with Gemini 3. I copy the HTML code and paste to Cursor/v0/lovable and prompt "Create a new landing page /page-name using this design but adapted to {site_name}. Replace the header and footer with the ones from my site. Adapt the whole page, keep everything: {HTML_code}" Details that can to be adapted or improved: Fonts: "Use {font_name} Google font for headings and {font_name} for body text." Icons: "Use Iconify {icon_set} icons" Colors: "Change primary color to blue. Everything else should be monotone." Bonus: "Make the outlines subtle" for a cleaner design. Animation intro/on scroll: "Animate when in view observed, fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0." Static to animated: "Animate details with {animate_type} and decorations.". Example types: line, beam animation, noodles, grid, sonar, etc. Background animation: "Apply the background animation using Unicorn Studio {animation_code}" Details to make your layout stand out: "Add vertical container-size lines. Add 01 02 03 number details." Stand out from generic-looking: "Make this more upscale with large tall fonts, Newsreader font and black and white agency". Adapt content: "Adapt the content to {copy and paste site texts}". Buttons: "Change main button to {code}. Add a 1px border beam animation around the pill-shaped button on hover." Adding sections like testimonials: "Adapt a new section after {section} using this code: {component code}". You can copy the code from Codepen, 21st dev or Aura. Responsiveness: "Make this responsive. Add a hamburger menu for mobile. Hide this {element} for mobile." Making forms work: "Make the form send an email to {your_email}". Payments: "Link the buy button to {LemonSqueezy payment link}". I use composer-1 for quick fixes. I finish with Claude Opus 4.5 for code reviews "Please review the code for performance and robustness". The template HTML code should give you a blueprint for all these, but I think it's important to keep iterating for your specific site.

Meng To

41,015 views • 8 months ago