What a surprise. With this function, no need to use javascript, everything will become simple. Don't forget to subscribe to the channel to watch more interesting videos about web developers ❣
Please make video on responsive nav bar but this should be really complex nav bar like it should have a lot of drop down. Then make it responsive for Mobile.
What if we have this component inside a modal and this modal have a width/height limit with overflow:hidden? when the menu is opened the content is cut. How can we handle this scenario? In React/Nextjs we have createPortal and its a valid choice but what if were using just HTML, CSS and JS?
Amazing! I knew about the details tag. But I thought of it as an old and ugly version of an accordion. Never thought of using it this way! Great content. 👍
For the people asking why should we do this without JS if we have JS. It is always best to ship the least amount of JS possible to the client (browser) to enhance speed and performance.
@@balex259 So you dont care about the people with a slower internet connection or weaker systems? And what about people having open tons and tons of applications all unoptimzed? I am running 16GB on my machine at work and having open a dozen different JS Applications together with Docker is fucking up my RAM dude.
As long as browsers implement stuff like that differently and at a different pace, js will always have it's place even for native stuff. I come from the same mindset. Use as litte js as possible. But if one can do this (or anything) now with jQuery and it works on IE6 and Opera Mini. Why would one use a native solution that only works in chrome and Firefox (but looks weird in Firefox) and will be supported by Safari in 2025 and breaks the entire page on the few but existing computers with older OS/browsers.
Thanks for this, I've been doing html since I was in around 90's or early 2000's (cant remember the exact year) and I didnt know or maybe realized about the "details" command
Great proof-of-concept, I would ensure that AI is making accessible examples. The most basic is ensuring either a screen reader name is used with using icons or at least aria-label.
First of all, great video, thanks for sharing! I would like to know how you will approach the menu animation, what if we need to animate the menu on open and close? Also what if we want to close the menu once one of the items inside is clicked or the user clicks outside of the menu not on the toggle button.
Please make video on responsive nav bar but this should be really complex nav bar like it should have a lot of drop down. Then make it responsive for Mobile.
Should have animated display on open and close. Also popover api is better for the last reason you mentioned in that it does the auto positioning for you based on available space. Might even be able to combine with these elements since popover is just an attribute
el details es muy bueno el problema es la flecha que siempre queda de ese lado, y claro, se la puede personalizar pero aun no funciona en firefox, safari y opera
Same, and then a few days later found out that it looked horrible on Safari because that browser doesn't allow you to style the ::marker (at least a year ago it didn't) so in the end went with list-style: none as they have here.
MasyaAllah, this video tutorial is great. It's all what I'm looking for. All videos in this channel is awesome. I like your voice too, even it's like mrbeast level 2,but it's ok. This voice help me to understand.
But ig its not possible to transition the details as u can see when u click on account icon there is a sudden opening of the list that we gave to details now how can we transition it 😕
![[Live] : ONE 169 วันนี้!! "อนาโตลี vs อูมาร์"](http://i.ytimg.com/vi/IK3YZVWuFJg/mqdefault.jpg)
What a surprise. With this function, no need to use javascript, everything will become simple. Don't forget to subscribe to the channel to watch more interesting videos about web developers ❣
Please make video on responsive nav bar but this should be really complex nav bar like it should have a lot of drop down. Then make it responsive for Mobile.
What if we have this component inside a modal and this modal have a width/height limit with overflow:hidden?
when the menu is opened the content is cut.
How can we handle this scenario?
In React/Nextjs we have createPortal and its a valid choice but what if were using just HTML, CSS and JS?
Thanks for shouting the instructions at me. It was helpful in that it overpowered the unnecessarily loud keyboard sound. Top notch ❤
😂❤
This is brilliant. Both the project and how you presented it. Great job!
Amazing! I knew about the details tag. But I thought of it as an old and ugly version of an accordion. Never thought of using it this way! Great content. 👍
Thank you so much 😍 Yes, There are many people who know about this html tag but can't think of how to use it 😍
For the people asking why should we do this without JS if we have JS. It is always best to ship the least amount of JS possible to the client (browser) to enhance speed and performance.
Yeah, few lines of js will slow a website… we are in 2024, you can build fast and more responsible with js…
@@balex259 So you dont care about the people with a slower internet connection or weaker systems? And what about people having open tons and tons of applications all unoptimzed? I am running 16GB on my machine at work and having open a dozen different JS Applications together with Docker is fucking up my RAM dude.
Or if you use blazor, like me, it is awesome
As long as browsers implement stuff like that differently and at a different pace, js will always have it's place even for native stuff.
I come from the same mindset. Use as litte js as possible. But if one can do this (or anything) now with jQuery and it works on IE6 and Opera Mini. Why would one use a native solution that only works in chrome and Firefox (but looks weird in Firefox) and will be supported by Safari in 2025 and breaks the entire page on the few but existing computers with older OS/browsers.
There's more to life than Chrome!
@5:22 : for webkit browser use : summary::-webkit-details-marker { display: none }
Glad to Know it ! Thanks ! I'm gonna put it in use right now!
Thanks for this, I've been doing html since I was in around 90's or early 2000's (cant remember the exact year) and I didnt know or maybe realized about the "details" command
TIL html commands = tags
This guy is not from planet earth, You are so great, Your presentation is Top-notch.
Thanks for shouting the instructions at me. It was helpful in that it overpowered the unnecessarily loud keyboard sound. Top-notch❤❤
my react project doesn't need too much on off state, thanks for this content
Great proof-of-concept, I would ensure that AI is making accessible examples. The most basic is ensuring either a screen reader name is used with using icons or at least aria-label.
There's no need to change voice ai. it's perfect 👌
As a css beginner doesn't know a letter in js all i see is a masterpiece of art🏆
Finally, there's someone who can who can actually teach us the art of css and js of real life scenarios.... ❤❤❤❤❤
Thanks, I will do more ❤
@@lundeveloper love you man. 😍 Just keep it up 💪💯
great tutorial please continue we'll support your with positive comments
Thank you brother 😍😍
@@lundeveloper you are most welcome my smart and creative friend
Ow i never knew about it, thank you lundev, we want more cool topics 🥰
Effortlessly explained but yet so good. This channel is going to blow up very soon!
First of all, great video, thanks for sharing! I would like to know how you will approach the menu animation, what if we need to animate the menu on open and close? Also what if we want to close the menu once one of the items inside is clicked or the user clicks outside of the menu not on the toggle button.
This is the good approach but it fails when we want to close the dropdown on outside click.
I am glad I saw this because I never knew that about the details and it works like a ui with no display-style nice
Please make video on responsive nav bar but this should be really complex nav bar like it should have a lot of drop down. Then make it responsive for Mobile.
Thank you for your sharing. I wonder how to manage the menu position from bottom to top with cards which at the bottom of the screen?
You are amazing. Thanks for the tip
SOO COOL!!! Question: is there an easy way to hide the buttons/items in the list when someone clicks anywhere else on the page?
Love that voice, keep doing the great work
Should have animated display on open and close. Also popover api is better for the last reason you mentioned in that it does the auto positioning for you based on available space. Might even be able to combine with these elements since popover is just an attribute
Amazing ? Nah.
Popover API and anchor positionning are amazing ! ❤
lemme go try yr videos to start from the basics.
Did you ElevenLabs Mr Beast as your narrator? haha good stuff
Jaw dropper video!
Is it possible to close an open collapsible when click on a different one just using css?
How would you go about Animations for opening/closing?
Sir please suggest best tutorials to learn advance css it will be very much helpful for us
Excellent job!!!
ohhh goood idea thanks bro
AMAZING. Thancks you for this content
you should do a vs studio setup/settings video
Thanx man you are legend ❤
Lmao you must be using MrBeast AI voiceover
great content for the 4th time
you can just set box2 to whatever it is not on click, no need for the if statement
el details es muy bueno el problema es la flecha que siempre queda de ese lado, y claro, se la puede personalizar pero aun no funciona en firefox, safari y opera
what about outside click ? Does it close when we click outside of the dropdown
Amazing video. Bring more of this🙌
Thank you 😍
Pretty clever, great presentation as well
This is Awesome Bro Thank You
Basic to advanced JavaScript course with project please
amazing!!
Is it possible to make the content pop up animated ? Like a smooth height from 0 to 100% ?
Great !
Where can we find the source code ?
Bro please how long did it take you to master all this?
Expecting more of these no js tricks!! ❤❤❤❤❤
I remember I once used it for an FAQ section
Same, and then a few days later found out that it looked horrible on Safari because that browser doesn't allow you to style the ::marker (at least a year ago it didn't) so in the end went with list-style: none as they have here.
Great !!
Thank you so much 😍
You rock!
That's brilliant ❤❤..
But it seems it wouldn't collapse if you click anywhere outside.
what vscode theme do you use?
Thank you so much 🎉❤
❤
😍
MasyaAllah, this video tutorial is great. It's all what I'm looking for. All videos in this channel is awesome. I like your voice too, even it's like mrbeast level 2,but it's ok. This voice help me to understand.
it is very usfull feature 😀
I didn't know Mr beast is making tutorial videos now
🎉
Bro 🎉❤ plz shear your theme with us
But ig its not possible to transition the details as u can see when u click on account icon there is a sudden opening of the list that we gave to details now how can we transition it 😕
thank you 🥰
he is legend
Thanks
😍😍
What if screen shows 2 items in each row
wow，I like
Thank you ☺️
Also whoch vscode theme is this?
it was created by me,
You will find video tutorials on my channel
please change this voice it's so uncomfortable
And it's funny 😅
It's tts I guess!!
Its mr beast , you don't like mr beast?
@@snoopdogg9490 Don't act stupid it's not mr beast it's a damn AI.
@@r_lonef nah man , i am sure its mr beast i always knew he was a front end dev
the cool
that crazy
Yes Very Crazy ^^
The voice drops suddenly. Aww it's uncomfortable
Mr beast voice clone is so annoying.
Yikes that voice. Please lower or remove the keyboard sounds as well
Контент хороший, но как же бесит эта синтетическая озвучка, прям🤮 Смотреть невозможно!
You are awesome mahn😮
wow !!! Great job sir. Please dont stop recorging your videos ;).
Thank you brother 😍
This is not collapsible.
This is either popover menu or context action menu.
Collapsible -- is an accordion 🪗
Bro why don't you uploaded it 3 days before I wasted my 40 mins for writing js😂
😅😅😅😅😅 I will try more