You made my day thanks 😊 Thanks for telling me that there is something called checked pseudo selectors and '~' to target for another class. 😥 Sadly ur channel is under-rated
Thank you very much man, you're a very good teacher. Even if my english is not perfect (I'm french), I've understood everything and It's now so much clear for me, you're the best. May the force be with you 👍
Thank you very much for your content, Very clear, explaining each step and giving us an understanding of each line enabling us to learn and adapt it to our needs. Keep it up
Thanks very very much, it was exactly what we needed. i just have a question, how can I ''collapse'' the one I just uncollapse. the only way it collapse now its by opening other section. thanks again.
Thx, but how to align this? I'm tried to body { display: flex; justify-content: center; align-items: center; height: 100vh; } but this doesn't work but this destroy my website totally How can I align only this div?
Hello. Does anyone know how I can add a scroll feature to the content when it's dropped down? Tried adding overflow: scroll to several places but no luck
how can i create the svg xml file and save it, i'm french the page is built with the 3 sections and the triangles but when i click on the traingle i cannot open it to see the paragraphs behind the sections.
Excellent tutorial! Friendly feedback: I think you missed to included the url for the SVG file. Also, the normal 100% view of the final product doesn't occupy the totality of a web browser's width, so that would have to be updated, in case there is the need to expand the view. =) Thanks!
I was having trouble because I only wanted 1 accordion ....and I had left the type="radio". Once switching it to checkbox it worked as expected. Reason: you can't de-select a radio button...
I went to codepen to test it out and it the links expanded ok, but clicking on the one that expands does not collapse it back up. so a section always stays open. Only upon initial entry are all sections closed. Once you expand one, one is always open. How to toggle a section so you can close it?
I had the same question! Luckily, @ayurtsybenov responded to another comment on this video, "I was having trouble because I only wanted 1 accordion ....and I had left the type="radio". Once switching it to checkbox it worked as expected. Reason: you can't de-select a radio button..."
Great tutorial, but I'm having a slight issue. I made a media query at 1280px and changed my display to grid so I could have a video side by side with the accordian. But now when I open the accordian, it shifts over slightly instead of staying in place. Anyone have any ideas what's going on here?
Hello, I really enjoyed your tutorial. However, I am having difficulty because the accordions do not activate when I click. I checked line by line with your code. Where did this "bug" come from?
Great Tutorial Thanks! I have an issue, what's about when the label is even more? The arrow icon will overlap with the label text. How can we fix this?
I was having trouble because I only wanted *1 accordion* ....and I had left the type="radio". Once switching it to *checkbox* it worked as expected. Reason: you can't de-select a radio button...
Awesome, thanks a lot! Can this also be done with just HTML? I have worked out a code, but it seems that the page doesn't stick to the label when I open it, but rather it moves label up and sticks to the text in the box, so the label goes all the way to the top of the page when I open it.
This channel is underrated
You made my day thanks 😊
Thanks for telling me that there is something called checked pseudo selectors and '~' to target for another class.
😥 Sadly ur channel is under-rated
No probs mate! Thanks
Helped greatly. Was so proud of a raw javascript accordion I built, but then it didn't work in Safari. This is working splendidly.
Thank you very much man, you're a very good teacher.
Even if my english is not perfect (I'm french), I've understood everything and It's now so much clear for me, you're the best.
May the force be with you 👍
Awesome, that's what I try to do with my voice over.
As a visual learner, your teaching method is excellent. I’m relearning CSS, and your channel is a big help to me.
Thank you very much for your content,
Very clear, explaining each step and giving us an understanding of each line enabling us to learn and adapt it to our needs.
Keep it up
SUPER helpful!! Thank you. This was the only CSS that worked for me.
I appreciate what you've done and especially that you have shown how to build an accordion from scratch.
wow. thank you so much for this! very helpful. no nonsense.
It's really a great video to watch, quite explanatory and straightforward.
Thank you
Amazing stuff! One of the few lecturers whose stuff you copy out and it actually works. Definitely subbed! :)
This is very good video.. Respect for content creator.
Awesome!
Very well explained for a beginner like me. Thank you and keep it up.
Love your work
This tutorial helps me to avoid headache :))
Short video and explained everything very well.
Best explanation!
Much love man, great video!
Just what I was looking for! Thanks :D PD: There are some bots that post in your comments, be sure to check out and delete them!
Great toturial my friend.
Cheers mate glad to hear you enjoyed.
Thanks very very much, it was exactly what we needed. i just have a question, how can I ''collapse'' the one I just uncollapse. the only way it collapse now its by opening other section. thanks again.
Thx, but how to align this? I'm tried to
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
} but this doesn't work
but this destroy my website totally
How can I align only this div?
Hello.
Does anyone know how I can add a scroll feature to the content when it's dropped down?
Tried adding overflow: scroll to several places but no luck
Perfect Video, thank you very much for that class.
how can i create the svg xml file and save it, i'm french the page is built with the 3 sections and the triangles but when i click on the traingle i cannot open it to see the paragraphs behind the sections.
Could this not be done with summary and details elements in html? It gives the show/hide functionality even before adding css.
Excellent tutorial! Friendly feedback: I think you missed to included the url for the SVG file. Also, the normal 100% view of the final product doesn't occupy the totality of a web browser's width, so that would have to be updated, in case there is the need to expand the view. =) Thanks!
Hello, how would you leave the first section open by default?
It is really useful and greatly explained. Thank you! :)
Great one… please how do you add transitions to the content just so it can open slowly
Also need this answer too. Any help please. Or have you figured it out.
This would be sick with a ColdFusion backend!
yeah but perfect for static sites!
This is great. Thank you!
Thanks a lot! It was really useful.
Quick question: How can I make the arrow button to also close the answer by clicking on it again?
I was having trouble because I only wanted 1 accordion ....and I had left the type="radio". Once switching it to checkbox it worked as expected. Reason: you can't de-select a radio button...
how about toggle animation? can we do it?
great work
Cool! Thanks men!
You should have used and to make your life easier.
I went to codepen to test it out and it the links expanded ok, but clicking on the one that expands does not collapse it back up. so a section always stays open. Only upon initial entry are all sections closed. Once you expand one, one is always open. How to toggle a section so you can close it?
I had the same question! Luckily, @ayurtsybenov responded to another comment on this video, "I was having trouble because I only wanted 1 accordion ....and I had left the type="radio". Once switching it to checkbox it worked as expected. Reason: you can't de-select a radio button..."
You can make an accordion with details and summary tag which requires lesser code with hardly any css
love this channel
What if I need to add more accordions ?
What should I do ?
Great tutorial, but I'm having a slight issue. I made a media query at 1280px and changed my display to grid so I could have a video side by side with the accordian. But now when I open the accordian, it shifts over slightly instead of staying in place. Anyone have any ideas what's going on here?
amaizing, thanks !!!
Awesome tutorial ++++++++++++ 😃
How can close it back(accordion) after clicking it again?
Very nice!! Thanks man! :)
does anyone know how to get the boxes to be centered in the page?
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
_There are 5 more ways to make a div center._
just add margin auto to the accordian class
Thanks for this amazing video!
How do I change multiple values at once like in 23:56 ?
On Visual Studio Code you only need to select the text and press [ctrl]+[shift]+[l]
if you can add animation while expand or collapse then it would be great.
Hello, I really enjoyed your tutorial. However, I am having difficulty because the accordions do not activate when I click.
I checked line by line with your code. Where did this "bug" come from?
Me too! But I don´t understand why
Fantastic! Question - Are you for hire? Or Consultation? I appreciate you guys and what you do for a living :)
Great Tutorial Thanks!
I have an issue, what's about when the label is even more? The arrow icon will overlap with the label text. How can we fix this?
One way is to trim the label after certain length and concatenate with … . You got to fix the width at some point!
I was having trouble because I only wanted *1 accordion* ....and I had left the type="radio". Once switching it to *checkbox* it worked as expected. Reason: you can't de-select a radio button...
Good tutorial. How to move the icon to the left, and maybe use plus (+) and minus (-)?
Awesome, thanks a lot! Can this also be done with just HTML? I have worked out a code, but it seems that the page doesn't stick to the label when I open it, but rather it moves label up and sticks to the text in the box, so the label goes all the way to the top of the page when I open it.
Thanks Bro.🙏
Doesn't close when you click it again :/
Thank you bro
Is there an advantage of doing this with Html/Css only instead of using javascript?
Of course, no arrow, even when copying / pasting the entire accordion_label::after CSS directly out of the linked code. :(
Thank you
:O , dude!
Iam not gay, but i love you so much ❤️❤️❤️❤️🤘
You can use than better good ways for accordion,cause this tutorial not useful for real projects
vola ... ocay ...
Tu parles trop