How to create a CSS-Only Accordion (Mobile Friendly) - HTML & CSS Tutorial
HTML-код
- Опубликовано: 10 сен 2024
- Link to code:
codepen.io/dco...
In today's video I'll be showing you how to create a CSS-Only Accordion that is responsive and mobile friendly. This is easily done using hidden input fields and a few CSS selectors.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
Follow me on Twitter @dcodeyt!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #html #css
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.
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
As a visual learner, your teaching method is excellent. I’m relearning CSS, and your channel is a big help to me.
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.
Love your work
This is very good video.. Respect for content creator.
Awesome!
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.
Short video and explained everything very well.
This tutorial helps me to avoid headache :))
Best explanation!
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! :)
You should have used and to make your life easier.
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!
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?
wow. thank you so much for this! very helpful. no nonsense.
This would be sick with a ColdFusion backend!
yeah but perfect for static sites!
Very well explained for a beginner like me. Thank you and keep it up.
Could this not be done with summary and details elements in html? It gives the show/hide functionality even before adding css.
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!
Perfect Video, thank you very much for that class.
You can make an accordion with details and summary tag which requires lesser code with hardly any css
Great toturial my friend.
Cheers mate glad to hear you enjoyed.
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.
Much love man, great video!
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
It is really useful and greatly explained. 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...
This is great. Thank you!
amaizing, thanks !!!
Hello, how would you leave the first section open by default?
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
great work
love this channel
Thank you bro
Thank you
Thanks Bro.🙏
Cool! Thanks men!
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.
Fantastic! Question - Are you for hire? Or Consultation? I appreciate you guys and what you do for a living :)
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?
Awesome tutorial ++++++++++++ 😃
Very nice!! Thanks man! :)
Of course, no arrow, even when copying / pasting the entire accordion_label::after CSS directly out of the linked code. :(
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..."
Good tutorial. How to move the icon to the left, and maybe use plus (+) and minus (-)?
Is there an advantage of doing this with Html/Css only instead of using javascript?
if you can add animation while expand or collapse then it would be great.
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.
What if I need to add more accordions ?
What should I do ?
How can close it back(accordion) after clicking it again?
how about toggle animation? can we do it?
Doesn't close when you click it again :/
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]
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!
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
: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