How to create a CSS-Only Accordion (Mobile Friendly) - HTML & CSS Tutorial

Подписаться 133 тыс.

Просмотров 36 тыс.

50% 1

Link to code:
codepen.io/dcode-software/pen...
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

Опубликовано:

12 апр 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 81

@noah_ishappy 4 года назад

This channel is underrated

@toddgilbey3979 3 года назад

Amazing stuff! One of the few lecturers whose stuff you copy out and it actually works. Definitely subbed! :)

@BL4CKHAWK8 4 года назад

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

@Angryjenkinsdigital 3 года назад

Helped greatly. Was so proud of a raw javascript accordion I built, but then it didn't work in Safari. This is working splendidly.

@user-ls8cu4ul8g Год назад

I appreciate what you've done and especially that you have shown how to build an accordion from scratch.

@roguishowl3915 2 года назад

As a visual learner, your teaching method is excellent. I’m relearning CSS, and your channel is a big help to me.

@suyashkumar0312 3 года назад

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

@dcode-software 3 года назад

No probs mate! Thanks

@Cheryl.Spencer 5 месяцев назад

SUPER helpful!! Thank you. This was the only CSS that worked for me.

@sodiqmak 2 года назад

It's really a great video to watch, quite explanatory and straightforward. Thank you

@earthycoin 3 года назад

Much love man, great video!

@amlslmn4573 3 года назад

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 👍

@dcode-software 3 года назад

Awesome, that's what I try to do with my voice over.

@Sowmyaj26 2 года назад

Very well explained for a beginner like me. Thank you and keep it up.

@cristi92ro 3 года назад

It is really useful and greatly explained. Thank you! :)

@ivanchudyk6129 4 года назад

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!

@becando2512 2 года назад

Love your work

@MrAbbo11 3 года назад

This is great. Thank you!

@TechniTrick 3 года назад

Very nice!! Thanks man! :)

@mininusequeci Год назад

Best explanation!

@alissonpaixao3620 2 года назад

Perfect Video, thank you very much for that class.

@highclasswheelz 2 года назад

Short video and explained everything very well.

@envyza7869 3 года назад

This tutorial helps me to avoid headache :))

@barnetteputong2652 3 года назад

Cool! Thanks men!

@iMcQueeni Год назад

great work

@maremeaxi3344 2 года назад

amaizing, thanks !!!

@TravelWithJahid 3 года назад

love this channel

@CesarJuarezVargas 2 года назад

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!

@4541047 4 года назад

Great toturial my friend.

@dcode-software 4 года назад

Cheers mate glad to hear you enjoyed.

@babylonmusfall 2 года назад

Thank you bro

@irjbobby Год назад

Thanks Bro.🙏

@mohamedyoussef8835 Год назад

Awesome tutorial ++++++++++++ 😃

@nanourgopierrefo122 Год назад

Thank you

@mgcloudpatil9993 2 года назад

This is very good video.. Respect for content creator.

@dcode-software 2 года назад

Awesome!

@leidyarroyave8955 2 года назад

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.

@gregorychamekh8143 3 года назад

:O , dude!

@seancmptn 4 года назад

This would be sick with a ColdFusion backend!

@shouryamkumar3369 2 года назад

yeah but perfect for static sites!

@ToddKarlen 4 года назад

Fantastic! Question - Are you for hire? Or Consultation? I appreciate you guys and what you do for a living :)

@oreal52 3 года назад

You should have used and to make your life easier.

@justsaybobby Год назад

wow. thank you so much for this! very helpful. no nonsense.

@dplantuk 3 года назад

Good tutorial. How to move the icon to the left, and maybe use plus (+) and minus (-)?

@rayyanabdulwajid7681 6 месяцев назад

You can make an accordion with details and summary tag which requires lesser code with hardly any css

@erikdgroot 2 года назад

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.

@frontenddevelopmentupdates6797 Год назад

if you can add animation while expand or collapse then it would be great.

@987Stephen1 4 года назад

Could this not be done with summary and details elements in html? It gives the show/hide functionality even before adding css.

@davidshortme 2 года назад

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?

@ilan19891 3 года назад

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?

@ayurtsybenov 8 месяцев назад

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...

@dylanfernando6435 Год назад

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

@TaleWhaleTV 4 года назад

What if I need to add more accordions ? What should I do ?

@NicoHeinrich 3 года назад

Thanks for this amazing video! How do I change multiple values at once like in 23:56 ?

2 года назад

On Visual Studio Code you only need to select the text and press [ctrl]+[shift]+[l]

@adrianwalker9917 2 года назад

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...

@baristikir67 3 года назад

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?

@TheSubconsciousSeeker 3 года назад

One way is to trim the label after certain length and concatenate with … . You got to fix the width at some point!

@ongke3655 3 года назад

how about toggle animation? can we do it?

@abdoolhoohadeedally477 2 года назад

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.

@manucass1000 2 года назад

Hello, how would you leave the first section open by default?

@saliuali8104 Год назад

Great one… please how do you add transitions to the content just so it can open slowly

@jeffreyboadu4452 10 месяцев назад

Also need this answer too. Any help please. Or have you figured it out.

@thepremdutta 3 года назад

How can close it back(accordion) after clicking it again?

@dakotaridge 3 года назад

Of course, no arrow, even when copying / pasting the entire accordion_label::after CSS directly out of the linked code. :(

@Matt459_ 2 года назад

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?

@OZtheVillain 2 года назад

Is there an advantage of doing this with Html/Css only instead of using javascript?

@pascalquetin8110 3 года назад

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?

@beatrizbacelar2680 3 года назад

Me too! But I don´t understand why

@tongy3334 3 года назад

Doesn't close when you click it again :/

@gijeet5374 2 года назад

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?

@Cheryl.Spencer 5 месяцев назад

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..."