Build a React Accordion from Scratch | ReactJS tutorial

Learn how to build an accordion in ReactJS. We'll go through and demonstrate piece by piece how to put together an accordion.
💛 Be sure to comment like and subscribe to the channel! I have plenty more videos: / @thetechteam

[@growthrough2123]

at minute 7:42 there are some styles added that the presenter doesn't talk about! Unless I missed it... He adds some styles to .content and then adds .content.show

[@shaksham.22]

i was wondering about the ame

[@aarongarcia2433]

Thank you so much! Of all the tutorials, articles, and codepens I searched through, this is the only one that worked in my case.

[@kelsola]

Prior to this video, I used an NPM package for my Accordion, but I caught a bug that couldn't be fixed and made no sense (over 5 hours wasted), so I knew I needed to build one from scratch. After watching your video, probably 45 minutes later, my "from scratch" Accordion is working perfectly. So thank you very much.

[@a.human.]

I feel you. I wasted my entire day today trying to fix a bug related to react slick. I finally got rid of it and built a carousel myself. Still, so much left to do today... I'm tired.

[@kelsola]

@@a.human. Yeah, working with packages can be a real pain in the butt when trying to fix undesired behaviors. I know that all too well from working with Rich Text Editors...

[@gabrielobafisile2299]

I love the way you simplified this. Thanks bro

[@shaksham.22]

If anyone doesnt understand why the stuffs get hidden at 7:34 then its because he adds another class content.show to it (see at 13:42) where content class hides the answers and content.show reveals it

[@shalombloodman1009]

the reason one would find trouble with the code is because it was made directly in the app.js file, you have to destructure it yourself and he said so in the video.

[@pesahson]

Looks really good. That transition makes it work super cool.

[@prathmeshkalehere]

I did it all step by step but I can't seem to get transition effect on it

[@artanme]

@@prathmeshkalehere same, i even tried using chatgpt to help me, but it doesn't work

[@autumn4421]

Simple, cool, effective and that's only the way which i could use
Thank you so much!

[@whysoserious-yj1ku]

Thank you! Dont know about the other comments.. i am working in Functional Components and this works like a charm

[@mazhabshosolihov1122]

Thanks bro

[@RizaHariati]

Very simple to the point explanation. Thank you

[@JenniferThomas-wz2qu]

Very cool, thanks

[@user-ks9zc3bi2p]

perfect thank you bro

[@RizaGunturPrakoso]

after you set flex and center suddenly answer hidden, why is that?

[@XxSouIxX]

He added "max-height: 0" and "overflow: hidden" to the 'content' class off-screen, apparently.

[@limitlessmedow4682]

@@XxSouIxX wow thanks I was asking myself that same question

[@codenamemoe9337]

@@XxSouIxX Thank you, I was thinking the same thing.

[@manitripathi9463]

ua-cam.com/video/XtkIFwQkacQ/v-deo.html

[@dorocodes7280]

would be awesome to publish the code and add a link to it in the video description

[@mahidharreddy8371]

Thank You bro. .. You just saved my Day..

[@InteligenciaEficiente]

Great! will use this logic on my project, thank you!!

[@missionmaths3867]

Thankyou you are a great teacher

[@shadowrebels1623]

thank you !!!!

[@ydub18]

Perfect explanation. Thank you!

[@youhavetodoit9070]

Thank You So Much

[@vladko9623]

Thank you so much. You have helped me! )

[@michellephoebe]

I have been having issues with React accordions cause the packages make the documentation bigger.
This is the best! Thank you!
Do you have a tutorial on nested accordion?

[@todortodorov9240]

Simple and effective. Thank you.

[@DuckYou25]

code works thanks, i dont what these dudes are saying

[@visheshkumar8015]

kept simple and well explained

[@CKNMEDIA]

Excellent stuff. Its working. 🔥🔥

[@prathmeshkalehere]

I did it all step by step but I can't seem to get transition effect on it

[@joecolas]

Thank you so much . this is very helpful

[@rasulakhundov500]

Thank you so much. So good tutorial

[@joepilibi]

Simple and efficient, nice !

[@yehch989]

Thank you so much!

[@maxaquilino7264]

Excellent stuff, well done!

[@Netik-AbonneToi59]

Thank you bro !

[@velloss]

helped me a lot, thankssssssss

[@kangegha]

what is the 'i' in the toggle function? 'index'? I got error saying that 'i' is indefined...

[@kalahari8295]

I is referring to a specific item index

[@Bhartiya_ekta]

Thanks a lot 🎉

[@NguyenDat-ee8kv]

Thank u bro i made it

[@LeGabrieell]

Thank you so much!!

[@BreatheWithoutHS]

Thank you, Sir!

[@andreporto7451]

very good, man!

[@dailyshorts723]

great work bro

[@alexeysedov278]

thank you!

[@Dwedari]

Really appreciate it

[@kishorkumarsoni]

Thanks sir. Awasome..👌

[@MrBuloy11]

it is good but needs to fix the shaking part, every time it is toggle.

[@ainneo]

amazing!!!!! thank you!

[@harshithakapa8019]

@the tech team can u plz share the code?

[@MariaFerraro]

Thank you!!!!

[@abdullahjaved2044]

Thanks Alot❤❤

[@twistekk7]

where to get this lorem ipsum text?

[@kirillpavlovskii8342]

Great, thanks

[@ViKiNG_89]

Thanks )

[@sagarmisra6932]

Not working with class component, any reference??

[@absoluteagency4306]

Awesome and simple , thanks

[@sunitajoshi-we7cn]

Where i can get the code

[@Scream-ne3np]

good job

[@brandon400]

it helps me. thx
how can i unselect an item?

[@Paulluskelvin]

Add the else keyword just after your if statement.
As in else setSelected(i);

[@Naz-h8z]

source code? sound quality?

[@ImperioTeixeira]

hi, very good video, I have a question though, can we use bootstrap accordion in react and to do the same thing you did?

[@saikeerthana4809]

yes

[@mohammadmahdialvansaz8001]

thanks

[@kalahari8295]

Best 🔥

[@blesintotv1803]

i is not defined

[@thokozanichisembele8877]

shout you out brudda

[@usamabintahir8284]

code available?

[@netsaosa4973]

epic

[@user-ml4ux7lp1s]

i have not worked

[@temirov6411]

'i' is not defined no-undef

[@MrLefteris3000]

too late propably but did you manage to find what was wrong?

[@Paulluskelvin]

Your map should receive at least two arguments. You probably didn't define it there.

[@theroastingershow161]

not working properly

[@Codingkite]

yes

[@Codingkite]

no working

[@marvellousadesanya8480]

volume extremely low.

[@orangelimesky]

Garbage. He doesn't explain anything about the css involved

[@Codingkite]

time visit my two hour😡 not working class

[@Codingkite]

fake video

[@abdul01020]

lol

[@viog8421]

Gracias, fue muy útil

[@temirov6411]

time visit my two hour😡 not working class