Accordion (HTML, CSS and JavaScript)

[@unpluggedaman]

That smooth transition on the max-height property instead of using display none/block was amazing. Thanks a lot

[@CodingJourney]

Oh thanks mate! Very glad you liked it 🙂

[@adziak]

Thanks to your video this seems to be very easy to do. Clear explanation, fast and straight to the point plus extra tips presented. Very cool!

[@kareynjeri3982]

i just found the best teacher on the internet !! explaining so smooth like to 5 year old ! and its free man God bless you ! make more content

[@CodingJourney]

Heh! Thank you for the lovely words 🙂 Many amazing teachers out there, tech community is the best 🙂 Keep coding!! 💙

[@eduardoevaristoa]

Thank you so much for the details, dude. Your explanations of certain ins and outs such as what exactly scrollHeight does in the code were crystal-clear!

[@bruhtrippin6795]

One of the best FAQ Accordion tutorials on KZbin! Thank you!

[@CodingJourney]

Thanks man! Glad you liked it 🙂💙

[@rwandalivecoding]

Thanks brother. After a long time coding I got one amzing hint from your works. Thanks a lot it took me 4 year to get to this one hint.

[@CodingJourney]

Oh my pleasure 🙂 4 years of coding already...amazing!! Keep coding 😉💙

[@lookintomyeyes2681]

wow , I just learned a lot from this one video, css entities, border images, and accordion itself, thq for explaining everything in detail, its soo helpful , subbed

[@CodingJourney]

Oh thank you for the lovely comment!! 🙏 Very glad you found this useful 🙂 Welcome aboard, keep coding!! 😉

[@PatrykKarwowski-ww5ij]

You explaind it very well and also gave alternative ways of doing this. Ive found this only on your channel. Best job! Thank you😊

[@psjtm2632]

Totally loved it. Thank you so much for giving many ideas in the process. Efficient and effective way, Sir!

[@CodingJourney]

Amazing! Totally my pleasure 🙂💙💙

[@philliponcarbs]

Thank you so much for explaining your work. I really like how you provided a quick glimpse of the alternative ways of doing one thing. I think if you found a way to do that more often, you might be standing out from the other webdev tutorial channels. Thats just a thought I had. It really helps me to know that there are other ways to accomplish one thing. even if it does add more explanation and editing time. I certainly appreciate it even if others do not. If you're not already, I can see you being on udemy in no time. Oh and I dunno if this works for you, but for me, I find that ident-rainbow for vscode helps me keep track of the div layers. Anyway thanks again!

[@CodingJourney]

Hey man! Thanks for the nice words and suggestions and feedback 🙂 I like what you are saying, it fits my style 😄 There is a trade-off however...longer videos! So it's a constant struggle to find a balance 🙂 Thanks again for the lovely comment! Best regards!!

[@kylencannon1524]

a trick: you can watch series on kaldrostream. I've been using them for watching all kinds of movies recently.

[@reisezone4574]

meeen i have been searching for the teaching like this for almost 2 days i can to find now, this video is very clear directly informative

[@CodingJourney]

Thanks mate, totally my pleasure 🙂💙

[@carlosraxon8062]

You did everything i wanted, im really thankfull, one of the best at frontend

[@CodingJourney]

Very glad to hear that man! Thank you for the lovely comment 🙂💙

[@ferozalimeghani2561]

Awesome example. Very useful explanations at every coding step.

[@neowisetv9044]

so far this is the most detailed tutorial i have ever seen. Thank you so much i have learn a lot from this tutorial. please make some more informative step by step tutorial videos.

[@CodingJourney]

So glad you liked this! Totally my pleasure 🙂 All the best, keep coding!! 😉💙

[@neowisetv9044]

@@CodingJourney sir can you make a step by step video of making a carousel/slider using html css and js. Thank you so much in advance.

[@ismasyafitri7308]

Thank you kindly for the code! It helps me a lot :D

[@pettiza]

Absolutely awesome tutorial; I have been trying to do this for at least a week before I found your video. Thank you so much!

[@CodingJourney]

Oh thank you for the lovely comment!! Huge love 💙💙🙂

[@bambindien3327]

1000x thank u from germany - really a high-end tutorial!

[@CodingJourney]

Oh thank you for the lovely comment 🙂 Warm greetings to Germany 💙

[@tylerdrabek1592]

Fantastic tutorial. I appreciate how you showed alternative solutions. Hope to see more content like this in the future.

[@CodingJourney]

Thanks man, glad you liked it! I'll try 😉

[@stiviniii]

The best video, this was what I was looking for 10/10. At first, I hesitated on but after watching half of it I knew this was the video I was looking for Thank you :)

[@CodingJourney]

Oh thank you for the lovely comment! 🙂 My pleasure, very glad you liked it!! 💙

[@lakshmianand1820]

Love the explanation!! Thank you so much. One minor alternative could be since you are anyways using display:flex, you could add justify-content: space-between to header and not worry about position relative to parent and absolute in header::after :)

[@CodingJourney]

Excellent suggestion 👍 Simplifies things and works just fine!! Thanks so much for sharing 🙏 That's why coding community rocks!! 😉💙

[@anshulmanapure1980]

I would appreciate if you would explain it a bit more. I dont understand it fully, but I would like to. Thankyou

[@ArtwithAmarBrisco]

Even though this tutorial is over two years old. Dude you helped me big time with this one. This solution @Coding Journey is elegant and easy to follow. Easy SUB for me.

[@CodingJourney]

Oh it's already been 2 years?!! Gee time flies 🙂 Thanks for the lovely msg mate, totally my pleasure! All the best, keep coding 😉💙

[@zhkq]

Such a great explanation. With good and bad ways to do same thing and why they don't work. I needed this

[@CodingJourney]

Oh very glad this was helpful 🙂 All the best, keep coding!! 😉

[@gamesstar337]

Finally i find my accordion and that's the reason I subscribed your channel

[@CodingJourney]

🙂 Very glad you liked it! Welcome aboard 😉💙

[@MahendraSingh-od6cp]

You got a new subs :) You are helping a lot of coders. Keep doing the great work!

[@CodingJourney]

Oh thank you for the lovely comment! 🙂 Welcome aboard 😉 You too, keep coding!!

[@Webnoob]

So now I've also taken the time to watch your tutorial. Again really well explained. I like it very much that you show many different ways for one thing to implement it. I have never used CSS Entity codes. It's a fantastic alternative. Keep it up. You're a hidden gem in all of these many developer channels.

[@CodingJourney]

Thank you so much for the lovely words Mario!! And thanks for taking the time to watch...despite the fact that you already knew how to create awesome accordions 😉😁 I've watched your accordion menu with Vue JS video and loved it 🙂 Keep it up bro!!!

[@TonyMoritz-s5i]

This is exactly what I needed! Thank you sir

[@Alberto_Sterling_Fit]

Simple functions and clean code, perfect for beginners.

[@CodingJourney]

Oh thank you, glad you think so 🙂💙💙

[@davidarias9175]

Excellent man! Justly I was looking for, I had the same problem about the large max-height defined in css, too fast for small items. Thanks!

[@CodingJourney]

Amazing! Very glad you liked this! Thanks for the lovely comment 🙂

[@davidarias9175]

@@CodingJourney Hey man, What would you do if the content scrollHeight changes after open? For example, if the accordion's content have dynamic elements that appears and dissapears so the height keeps changing. PD: I'm trying to solve that problem in react 😥 so I don't think I can use custom event listeners

[@CodingJourney]

Hey man! In that case you should readjust the max-height accordingly. For example when the dynamicElement shows up: accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + dynamicElement.scrollHeight + "px"; Hope this works. Unfortunately it would be a full-time job for me to provide full support to all questions to all the projects I've uploaded so far (without the salary part 😁). The main purpose is to get you started so that you can go ahead and experiment and find solutions to your specific cases! All the best mate, keep coding 😉

[@davidarias9175]

@@CodingJourney Thank you so much! I'm going to try to adapt that logic. My best whishes for your channel. 🥇

[@farookahmed4496]

Outstanding man after watching the whole video I understood why this tutorial is so long. great great content plz keep doing it. Your channel has been subscribed.

[@CodingJourney]

Oh thanks for watching and for the nice words!! Comments like this one definitely encourage me to keep going 🙂 Thanks again, welcome aboard 😉

[@n33k01A]

This tutorial is Gold.

[@CodingJourney]

Oh thank you 🙏🙂 Very glad you liked it!! 💙

[@ck0024]

This is what I was looking for. Thank you 3000 ❤ *You own a New Subscriber* 👍👌

[@CodingJourney]

🙂 Amazing! Very glad you liked this 🙂 Welcome aboard 😉💙

[@danielChibuogwu]

Thank you, this was exactly the solution I was looking for. That is, how to animate the accordion. Thank you very very much

[@CodingJourney]

Super! My pleasure 🙂💙

[@tylorwright7884]

Enjoyed the explanations and different examples of what you could do! 10/10

[@CodingJourney]

😊 I would be somewhat satisfied with 6 or 7...but a 10...wow! 😉🙂 Thanks for the lovely message man, very glad you liked it!!

[@charlesshanefelter233]

Good job, I also love the explanation and showing the different techniques. Your method of teaching helps me grasp the concepts and fullers my understanding.

[@CodingJourney]

So very glad to hear that! Thanks for the lovely comment 🙏🙂 Keep it up!!

[@GaurobBuragohain]

You saved my day bro... thanks

[@matj5285]

Finally an accordion I can understand and feel good about. One question, how to display first accordion open by default. I added an additional class '.first' to '.accordion-item-body' and used 'overflow: visible' in the CSS which shows it but doesn't push the content underneath it down. Thanks!

[@CodingJourney]

Hey! Glad you liked it :) One way to go about it would be to simulate a click event over the first accordion item with JavaScript. So after adding the event listeners, you could add the following at the end of the .js file: accordionItemHeaders[0].click(); That's all! This way, however, accordion item will open with the animation/transition. I would be fine with this, but it's a matter of taste :) If you don't like this, you could temporarily set transition-duration to 0 for first accordion item and restore it back to 0.2s, or, instead of simulating a click event you could take the following approach: 1. In HTML add the active class to accordion-item-header: 2. In CSS: .accordion-item:first-child .accordion-item-body { max-height: initial; } 3. But max-height for first accordion item should be set in pixels so that animation works the first time we try to minimize it. So in JS: accordionItemHeaders[0].nextElementSibling.style.maxHeight = accordionItemHeaders[0].nextElementSibling.scrollHeight + "px"; Hope this works for you! There are always many ways to approach a problem so feel free to differentiate if you come up with a solution that makes more sense to you :) All the best!!

[@matj5285]

@@CodingJourney This works a treat. I used the first approach you outlined, and agree it does look good animated as visitor enter the page

[@matj5285]

Can a border added to accordion-item-body be made so it's not visible when the accordion is collapsed? It's appearing as a slight bottom border added to accordion-item-header, which is the top and bottom border of accordion-item-body.

[@stuartwatson659]

Very well explained. Just subscribed. Please keep creating content like this.

[@CodingJourney]

Oh thank you, very glad you liked it!! Welcome aboard 🙂💙

[@juststefan988]

Great code, thank you for sharing this!

[@subirbhakat9090]

The video is beneficial. the whole content is adequately explained. thank you.

[@CodingJourney]

Oh thank you 🙏 My pleasure!! 🙂💙

[@sams1669]

Underrated! This made me subscribed.

[@CodingJourney]

Oh thank you mate! Welcome aboard!! 💙🙂

[@theentrepreneur967]

Amazing step by step presentation! Appealing to all levels of learning. Thanks so much for your time and effort you've taken to present this knowledge and information to us! Like and Subscribed! May the KZbin algorism gods treat you well!

[@CodingJourney]

Oh thank you for the lovely comment, much appreciated 🙂 Very glad you found this helpful! Welcome aboard, may the Entrepreneurship gods be with you 😉💙

[@etgima318]

sweet thank you for explaining with so much depth!

[@CodingJourney]

🙏 Very glad you liked it!! 💙🙂

[@mizukii54]

Thank you so much for this tutorial! That's exactly what I wanted!

[@CodingJourney]

Excellent! Very glad to hear that 🙂💙

[@jamietorio7034]

Thank you so much!! Exactly what i'm looking for. Please make a tutorial about modals thanks a lot.

[@CodingJourney]

My pleasure, glad you liked it!! I did make a tutorial about modals: kzbin.info/www/bejne/j3K1ioaBrriqnsk hope it helps 🙂 All the best, keep coding!!!

[@sribalajia]

I really loved your explanation. Thank you so much. I've subscribed to your channel. Look forward to see more and more videos from you. 😊

[@CodingJourney]

Oooh thank you for the lovely comment!! Welcome aboard 😉💙💙

[@ousssikavf4276]

you can also see here, how i create Another Awesome Accordion with html , css and javascript ( kzbin.info/www/bejne/d4HGeJRniaeGf6M

[@Heloisa404NF]

I love it!!! This tutorial helps me a lot You have no idea Thank you for this simple and didactic video

[@CodingJourney]

Oh thank you for the lovely comment! Very glad this was helpful 🙂 All the best, keep coding 😉💙💙

[@NuNaKri]

Wow, you explain everything so well! Thank you, awesome Video! :D

[@CodingJourney]

Oh thank you for the lovely comment 🙂 Very glad you liked it! All the best, keep coding!! 😉

[@newentu]

excelente tutorial!

[@pedroasaph6921]

BRO YOU ARE AWESOME THANK YOU SO MUCH I LOVE YOU GOD BLESS YOU MAN

[@CodingJourney]

Oh thanks for the lovely message bro! Huge love 💙💙🙂

[@roguinpena1303]

Thanks, very clear and useful

[@nic3guy]

You are amazing! Thank you very much for your clear explanation!

[@CodingJourney]

Oh thank you! You are amazing 😉 Keep it up, take care!! 💙

[@brunocamarinijr8717]

Dude, you just made my day! Thank you very much, it was really helpful. Also, i really liked the way you presented more than one way to design the menu (like the "+" and "-" icons, or the up and down point arrow). It was exactly what i was looking for and this vid helped me a lot. Thanks again!

[@CodingJourney]

Oh thank you for the lovely comment 🙏🙂 Very glad you liked it!!

[@luisestebanruiz9773]

Dude, great vid just at the time when i am re-learning HTML5 and CSS, i mean i am in bootstrap rehab.

[@CodingJourney]

Heheh amazing! Very glad you found this useful 🙂 I've been Bootstrap-free for the past 21 months 😋😁 Totally skipped V4, but now that jQuery is out of the way, maybe I'll give V5 a try...I just hope I can control it this time 😁😉

[@luisestebanruiz9773]

@@CodingJourney i think that is unnecesary, BST is open source, so you can scrap into the main CSS and JS , SO you have a base in order to code your own boilerplate, 90% of the web designs follow certain paths, so you only use the tools what you need. In fact, whit the rise of the JAM stack, and the standarization of the Reactive coding ( React, Angular , Vue), you can control the modularity, so making a little effort, of JS and JSX, you can create your own bootstrap-based components.

[@CodingJourney]

Absolutely, totally agree! But sometimes it is a quick and convenient solution...for example if a friend asks you to create a website for him and you know he is not really serious about it, then using a nice Bootstrap template would be a good choice 😁 and of course for quick prototyping! But, overall, I agree, it is definitely not necessary! I think balance, is the key word...we can use it if it makes sense, but we shouldn't be addicted to it 🙂😉

[@luisestebanruiz9773]

@@CodingJourney have you ever tried Grapes.JS ? is like a elementor but for serious developers, it makes prototyping way far easier, an you can include your own elements, combined whit another JS technologies , you got super powers, in fact it would be a great challenge implementing this into a wordpress workflow, 'cause WP, now comes whit composer , so is way easier implement laravel into a WP developing enviroment, in fact WP is getting more JS friendly, and Grapes JS , could have a good integration whit LARAVEL, because both have VUE by default.

[@CodingJourney]

That sounds promising! Haven't heard of Grapes.JS before, I will definitely look into it. Thanks for sharing!! 🙏💙

[@herion05]

Great explanation about this topic

[@CodingJourney]

Thanks mate, glad you liked it!!

[@Ram-m1s9b]

Thanks❤️❤️buddy love you explaining it was very useful content for every 🔰 beginner developers

[@CodingJourney]

Oh thanks mate, my pleasure 🙂 Keep coding 💙💙

[@fabianpetersen2452]

Well done and to the point

[@fredlaurent32]

Bravo, good job, merci 👍👍👍

[@CodingJourney]

Oh thank you, my pleasure 🙂💙💙

[@MrAbbo11]

Great tutorial. Thank you.

[@CodingJourney]

My pleasure 🙂 Glad you liked it!

[@shankarganesh4273]

For the same video can you add accordion inside accordion or nested accordion

[@gdcaciorgna]

Hi! Thank you so much for this explanation. I have a problem when I want to convert this code suitable for displaying sub-accordions. That is, ul tags inside li tags. Is it posible?

[@ob5804]

Thanks for the tutorial and i have a question. I liked the option without height, and is it possible to make one item open by default, how to do it in js??

[@wulanamandadeviniluh2527]

thank you so much! you've helped a lot!

[@CodingJourney]

Super! Very glad you found this helpful!

[@wulanamandadeviniluh2527]

@@CodingJourney one question, how can I display 2 items in the javascript? In my case I'd like to display item content & item note. Thanks before

[@somtechacademy]

Subed thank you sir it is really helpful couldn't realize, but i have one more question "how i could add more accordions now i've got 5 different accordions with their answers so how i can add more" i appreciate you're hardworking

[@CodingJourney]

Hey man thanks, welcome aboard 🙂 If I understand correctly you want to add more accordion items (each containing a new question and answer)? If that's the case, you simply add more accordion items, e.g. copy and paste an "accordion-item" div with its content and replace the text in "accordion-item-header" and "accordion-item-body-content" with your new text! All the best, keep coding 😉💙

[@somtechacademy]

@@CodingJourney yeah man got it, and it really worked! indepth appreciation💙💙💙

[@NamiSorako]

The best explanation of all that I wanted to know, thanks a lot ಥ‿ಥ

[@CodingJourney]

Oh thank you! My pleasure 🙂💙

[@tompain1985]

Great video! Thanks

[@vokechamp]

Awesome, Subscribed.

[@CodingJourney]

Amazing!! Thanks man, welcome aboard 😉💙

[@ShaharKBar]

thanks a lot !! great explenation and very clear code - i will use it for sure appreciate the open source and surly i will credit you in my code :-)

[@CodingJourney]

Oh thank you for the nice words! Very glad you found this useful 🙂 No need for credit! I'm just happy to help fellow coders!!! All the best, keep coding!! 😉

[@funwithfans1482]

if i want the fast collapse to be open?? what should i do in your js code ?? please tall meee......

[@James-dh6gt]

Wonderful tutorial mate! Thanks 🧡

[@CodingJourney]

Thank you mate 😉🙂

[@ivanbarta2821]

Thank you 👍 It is very simple and very effective code.

[@CodingJourney]

My pleasure 🙂 Glad you liked it! All the best, keep coding 😉💙💙

[@lauratsai1223]

This really helps and is the tutorial that I've been looking for!! Thank you sooo much! Btw I've got something confused. I don't understand why 26:28 using 'toggle' instead of 'remove' Could you please explain more about it🥺

[@collinsattafuah2947]

Please how did you do this *.accordion-item-header.active + .accordion-item-body* Is there a special way you added the + symbol to the syntaxI tried and it’s not working . Please help

[@eli_paule3804]

Thank you very much for this video.

[@CodingJourney]

My pleasure 🙂 Glad it was helpful! Keep coding 😉

[@Frankslaboratory]

Well explained as usual !

[@CodingJourney]

Thanks man! Glad to see more people appreciating the wizardry happening in the laboratory and joining in 😉 Doing great man, keep it up!!!

[@lookintomyeyes2681]

best video ever

[@MelkoR4111]

very nice explanation! however, would be cool if you could also explain for noobies, for example, why do u use '=>' or 'event =>', that was some sort of questions that would be cool to make clear

[@CodingJourney]

Glad you liked it! Usually I get the opposite...that my videos are too long and I shouldn't get into that much detail 🙂 Thanks for the suggestion though!! I'm always trying to find a good balance! Regarding your question here's a link about Arrow function expressions: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions. Doing great mate, keep coding!!

[@debby18ful]

Hey, thank you for making the video. I would like to ask, what is the purpose of ' defer' attribute that you use to link the js file? Thanks in advance!

[@CodingJourney]

Hey! My pleasure, glad you liked it! When the "defer" attribute present, it specifies that the script is executed when the page has finished parsing. (so that we can access and manipulate the subsequent DOM Elements) Although not exactly the same, you can consider it as an alternative to the more "classic" way, of placing the script tag (without the "defer" attribute) at the bottom of the page, just before the closing tag. Hope this kind of clarifies things 🙂 All the best, keep coding!!!

[@debby18ful]

@@CodingJourney thank you for the fast reply! :)

[@luissolares419]

thank you!!! good video.

[@CodingJourney]

My pleasure 🙂 Glad you liked it!! 💙

[@user-dg8ys]

Thanks Malaka!

[@CodingJourney]

Hahah! Love it 😂

[@denhamk]

finally! coding that works! simple and effective! Thank you! Please are you able to help me with using VS-CODE to upload a site to a hosting site?

[@anshulmanapure1980]

This video is clearly outstanding, thanks for the video. But I've recently learnt JS and I am having hard time understanding the toggle function you created. At 13:56, In forEach() method are you declaring another function named accordianItemHeader?

[@annekhilji5595]

I am using Dreamweaver to create this accordion, but on 14.4 min it gives me error when I enter const in main.js, please advise. Thanks

[@tommyzDad]

Thank you for another vanilla javascript project. Will you consider doing a responsive image gallery tutorial? I'm envisioning a site that, on mobile devices shows only five or six images, with the number of images going up as the screen/ device sizes go up. But I cannot decide if Flexbox or Grid would be the best choice for this project.

[@CodingJourney]

Hey man thanks! I will consider but currently there are at least 150 topics in my list I'm also considering 🙂 and given my production rate...I don't know, this could take a few years 😂 You could go either way (Flexbox or Grid)... in general, Flexbox is for laying out items in a single dimension - row OR a column and Grid is for layout of items in two dimensions - rows AND columns. So, accepting that current browser support for CSS Grid is good enough, grid seems to me a bit more reasonable choice for image gallery. All the best man, have a great year!! 🙂

[@alexmark6645]

You teach in detail better than my current bootcamp teacher, how ironic 😅. I’d have just paid you instead to upload more educational contents

[@CodingJourney]

Oh thank you so much for the kind words! Really appreciate it 🙏💙💙 All the best to your web dev journey, big love!!

[@jeferson9011]

Thank You! You got a new subs.

[@CodingJourney]

Amazing! Welcome aboard 🙂

[@5oLitaryMan]

Thanks for spreading the knowledge mate! Every new video is better than the last. I wish I could say the same about you jokes. 😜

[@CodingJourney]

Ahahahahah!! What a joker 😂😉 Huge love man 💙💙🙂

[@oleksandrbelzetskyi8295]

well done!

[@front-endanimal6359]

Nice accordion, man, you cool

[@CodingJourney]

Thanks man, glad you liked it!! Nice channel btw, keep up the good work 👍🙂

[@front-endanimal6359]

Thank you, if you wanna helр my channel i will very haррy

[@VideoNash]

thanks

[@daminirathod6596]

thank you so much sir

[@CodingJourney]

My pleasure! Glad you liked it 🙂

[@thinkdo9470]

great thanks so much

[@CodingJourney]

My pleasure 🙂 Very glad you liked it!!

[@davidcesarquinterossarmien2701]

Gracias, me salvaste el orto! Te amo

[@Annegaarden]

Great video and explanation, thank you! One of my accordions has a loooot of content and even though it's not visible, it makes the page unnecessarily long to scroll. If I put a new section or element after the accordion, it appears immediately after though so that's not a problem. But I would like to avoid the long scroll, is there a way to fix this?

[@CodingJourney]

Hey! Thanks, glad you liked it 🙂 That's weird... If I understand correctly you mean that you have a lot of content in "accordion-item-body-content" which despite the fact that it is initially hidden it still causes the long scroll? That shouldn't be happening since "accordion-item-body" is set to {max-height: 0; overflow: hidden; ... }. Maybe that's not related to the accordion? Because if it was you would also probably not be able to add content right after the accordion...You can find a link to this project in the description btw! Maybe try adding your content there and if the problem persists feel free to send me a link (maybe in CodePen) with the specific part you are having trouble with and I could take a look! All the best, keep coding!! 😉🙂

[@Annegaarden]

@@CodingJourney Thanks so much. I compared your code to mine more closely and solved the mystery :) I had a custom checkbox designed in the accordion content and therefore set to opacity 0 and position absolute which made the hidden checkboxes float around and take up space apparently. Display none did the trick. Have a good and keep up the good work :)

[@CodingJourney]

Amazing! Thank you, you too!! 🙂💙

[@nasim6778]

thank you so much

[@CodingJourney]

My pleasure 🙂 Very glad you liked it!!

[@Andy_a7]

great, so "active" class does not have any CSS properties assigned to it. It is used as an empty class to trigger JS commands based on the "active" class presence or absence. That's smart.

[@CodingJourney]

Exactly! Also the absence or presence of the "active" class can define the styling of certain elements. In our example we set styling for the: .accordion-item-header::after{...} and when the "active" class is present we make changes to that styling: .accordion-item-header.active::after{...}. All the best, keep coding...and pianoing 😉💙

[@Andy_a7]

@@CodingJourney Thanks! would've been great to see an example of accordion using "aria-expanded" attribute.

[@kareynjeri3982]

How can i join the the training program ? as a trainee

[@tompain1985]

Has anyone else struggled to ensure that the ::after icon in the accordion item header stays vertically central when the header wraps onto two lines? For me, it's great on some browsers but on others (e.g. Safari), the icon moves to the bottom once the text has wrapped

[@CodingJourney]

Hey man! Unfortunately I currently don't have access to Safari browser so that I can debug, but I think the following would do the job: .accordion-item-header::after { ... height: 100%; display: flex; align-items: center; } Hope it works! If not feel free to let me know so that I can think of something else :) Not the most efficient debugging, I know, but we adjust ;) :)

[@tompain1985]

@@CodingJourney thanks for getting back to me! This was what I also thought of but strangely it moves the icon down to below the header / over the accordion-item-body-content, which I can't understand why. This is only on mobile but on Chrome, Safari and Firefox on mobile and on two different sites that I have tried it on. You can see what I mean here: res.cloudinary.com/packed/image/upload/v1591088320/Screenshot_2020-06-02_at_09.58.08.png Any help would be hugely appreciated!

[@CodingJourney]

Again, unfortunately it works fine on my mobile (Android with Chrome browser)...Debugging steps I would take: 1. From what I can see your accordion is part of a more complex component and also using additional classes...so in order to ensure that the problem is not due to styling conflicts, try opening the final project (link in the description). 2. If the problem is still there, I would try the one we tried and didn't work :) 3. Next effort: let's go classic and try also specifying the distance from the top, so: .accordion-item-header::after { ... top: 50%; transform: translateY(-50%); } 4. Hope 3 works (it also works fine on my mobile). There is always the last resort (which we are trying to avoid), to add an extra element in accordion-item-header for the icon (instead of using the ::after pseudo-element)... All the best!! :)

[@tompain1985]

@@CodingJourney thank you so much! top: 50%; transform: translateY(-50%); Works perfectly! Your videos are great man, keep up the good work - they are so useful for people learning to code. Thanks again! 🙏

[@CodingJourney]

Phew :) Very glad to hear that...I was running out of alternatives ;) Thank you for the very nice words! All the best, keep coding ;) :)

[@ajjarindahouse]

Can you do nested accordions with this?

[@ajjarindahouse]

ok

[@swarnavachaudhury964]

awesome

[@CodingJourney]

Yes you are!! 😉

[@shakawathossain7850]

best one

[@CodingJourney]

🙂 Thank you! Glad you liked it.