Accordion (HTML, CSS and JavaScript)

Learn how to create an Accordion, which is a component that organizes content within collapsible items, with HTML, CSS and JavaScript.
Accordions, allow the user to toggle between hiding and showing blocks of content with a single click, thus greatly enhancing the User Experience (UX) of your project.
In our specific example, we are using the Accordion for the Frequently Asked Questions (FAQ) part of our web page. So, the visible part of the Accordion is the question and the hidden (or collapsible) part is the answer.
As usual, we are implementing this component from scratch, with HTML, CSS and Vanilla JavaScript as an alternative to using some third-party library or framework for this purpose.
Enjoy 🙂
Don’t forget to share, like, subscribe and I would love to hear your thoughts in the comments section below!
Code for this Project: codepen.io/Coding_Journey/pen...
Support the Channel 💙☕🙏
PayPal: paypal.me/CodingJourney
Suggested Videos:
Modal with HTML, CSS and JavaScript: • Modal with HTML, CSS a...
CSS box-shadow Editor: • CSS box-shadow Editor
Simple Auto-Playing Image Slideshow (HTML, CSS and JavaScript): • Simple Auto-Playing Im...
Colorful Background with linear-gradient: • Colorful Background wi...
Slide-In Overlay Hover Effect (HTML & CSS): • Slide-In Overlay Hover...
Decide - Create - Publish - Repeat: • Decide - Create - Publ...
Codepen: codepen.io/Coding_Journey/
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney

Пікірлер: 225

  • @adriancygan9391
    @adriancygan939110 ай бұрын

    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!

  • @eduardoevaristoa
    @eduardoevaristoa3 ай бұрын

    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!

  • @PatrykKarwowski-ww5ij
    @PatrykKarwowski-ww5ij4 ай бұрын

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

  • @unpluggedaman
    @unpluggedaman3 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

    Oh thanks mate! Very glad you liked it 🙂

  • @ferozalimeghani2561
    @ferozalimeghani25612 жыл бұрын

    Awesome example. Very useful explanations at every coding step.

  • @bruhtrippin6795
    @bruhtrippin67953 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

    Thanks man! Glad you liked it 🙂💙

  • @user-so8pb8nf6t
    @user-so8pb8nf6t7 ай бұрын

    This is exactly what I needed! Thank you sir

  • @ismasyafitri7308
    @ismasyafitri73089 ай бұрын

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

  • @pettiza
    @pettiza3 жыл бұрын

    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

    @CodingJourney

    3 жыл бұрын

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

  • @juststefan988
    @juststefan988Ай бұрын

    Great code, thank you for sharing this!

  • @lookintomyeyes2681
    @lookintomyeyes26813 жыл бұрын

    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

    @CodingJourney

    3 жыл бұрын

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

  • @Webnoob
    @Webnoob4 жыл бұрын

    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

    @CodingJourney

    4 жыл бұрын

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

  • @GaurobBuragohain
    @GaurobBuragohain14 күн бұрын

    You saved my day bro... thanks

  • @carlosraxon8062
    @carlosraxon80623 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

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

  • @bambindien3327
    @bambindien33274 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    4 жыл бұрын

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

  • @psjtm2632
    @psjtm26322 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    2 жыл бұрын

    Amazing! Totally my pleasure 🙂💙💙

  • @kareynjeri3982
    @kareynjeri39822 жыл бұрын

    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

    @CodingJourney

    2 жыл бұрын

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

  • @roguinpena1303
    @roguinpena1303 Жыл бұрын

    Thanks, very clear and useful

  • @ck0024
    @ck00243 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

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

  • @reisezone4574
    @reisezone45742 жыл бұрын

    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

    @CodingJourney

    2 жыл бұрын

    Thanks mate, totally my pleasure 🙂💙

  • @MahendraSingh-od6cp
    @MahendraSingh-od6cp3 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

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

  • @tylerdrabek1592
    @tylerdrabek15923 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

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

  • @newentu
    @newentu Жыл бұрын

    excelente tutorial!

  • @rwandalivecoding
    @rwandalivecoding2 жыл бұрын

    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

    @CodingJourney

    2 жыл бұрын

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

  • @mizukii54
    @mizukii544 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    4 жыл бұрын

    Excellent! Very glad to hear that 🙂💙

  • @tylorwright7884
    @tylorwright78844 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    4 жыл бұрын

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

  • @etgima318
    @etgima3184 жыл бұрын

    sweet thank you for explaining with so much depth!

  • @CodingJourney

    @CodingJourney

    4 жыл бұрын

    🙏 Very glad you liked it!! 💙🙂

  • @nic3guy
    @nic3guy2 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    2 жыл бұрын

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

  • @MrColdkilla69
    @MrColdkilla69 Жыл бұрын

    Wow this is a pretty descriptive way of making an accordion.

  • @fabianpetersen2452
    @fabianpetersen24522 жыл бұрын

    Well done and to the point

  • @stiviniii
    @stiviniii2 жыл бұрын

    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

    @CodingJourney

    2 жыл бұрын

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

  • @NuNaKri
    @NuNaKri3 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

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

  • @tompain1985
    @tompain19854 жыл бұрын

    Great video! Thanks

  • @farookahmed4496
    @farookahmed44963 жыл бұрын

    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

    @CodingJourney

    3 жыл бұрын

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

  • @charlesshanefelter233
    @charlesshanefelter2334 жыл бұрын

    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

    @CodingJourney

    4 жыл бұрын

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

  • @zhkq
    @zhkq3 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

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

  • @James-dh6gt
    @James-dh6gt4 жыл бұрын

    Wonderful tutorial mate! Thanks 🧡

  • @CodingJourney

    @CodingJourney

    4 жыл бұрын

    Thank you mate 😉🙂

  • @theentrepreneur967
    @theentrepreneur9672 жыл бұрын

    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 KZread algorism gods treat you well!

  • @CodingJourney

    @CodingJourney

    2 жыл бұрын

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

  • @Alberto_Sterling_Fit
    @Alberto_Sterling_Fit2 жыл бұрын

    Simple functions and clean code, perfect for beginners.

  • @CodingJourney

    @CodingJourney

    2 жыл бұрын

    Oh thank you, glad you think so 🙂💙💙

  • @Heloisa404NF
    @Heloisa404NF2 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    2 жыл бұрын

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

  • @gamesstar337
    @gamesstar3373 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

    🙂 Very glad you liked it! Welcome aboard 😉💙

  • @philliponcarbs
    @philliponcarbs4 жыл бұрын

    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

    @CodingJourney

    4 жыл бұрын

    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

    @kylencannon1524

    3 жыл бұрын

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

  • @stuartwatson659
    @stuartwatson6594 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    4 жыл бұрын

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

  • @Telugupuranalu
    @Telugupuranalu2 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    2 жыл бұрын

    Oh thanks mate, my pleasure 🙂 Keep coding 💙💙

  • @sams1669
    @sams16693 жыл бұрын

    Underrated! This made me subscribed.

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

    Oh thank you mate! Welcome aboard!! 💙🙂

  • @pedroasaph6921
    @pedroasaph69212 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    2 жыл бұрын

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

  • @funwithfans1482
    @funwithfans14823 жыл бұрын

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

  • @MrAbbo11
    @MrAbbo113 жыл бұрын

    Great tutorial. Thank you.

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

    My pleasure 🙂 Glad you liked it!

  • @oleksandrbelzetskyi8295
    @oleksandrbelzetskyi82953 жыл бұрын

    well done!

  • @gdcaciorgna
    @gdcaciorgna2 жыл бұрын

    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?

  • @danielChibuogwu
    @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

    @CodingJourney

    Жыл бұрын

    Super! My pleasure 🙂💙

  • @lakshmianand1820
    @lakshmianand18203 жыл бұрын

    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

    @CodingJourney

    3 жыл бұрын

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

  • @anshulmanapure1980

    @anshulmanapure1980

    3 жыл бұрын

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

  • @sribalajia
    @sribalajia4 жыл бұрын

    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

    @CodingJourney

    4 жыл бұрын

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

  • @ousssikavf4276

    @ousssikavf4276

    4 жыл бұрын

    you can also see here, how i create Another Awesome Accordion with html , css and javascript ( kzread.info/dash/bejne/c4SXqcNqhKW5eaQ.html

  • @anshulmanapure1980
    @anshulmanapure19803 жыл бұрын

    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?

  • @subirbhakat9090
    @subirbhakat90902 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    2 жыл бұрын

    Oh thank you 🙏 My pleasure!! 🙂💙

  • @ob5804
    @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??

  • @herion05
    @herion05 Жыл бұрын

    Great explanation about this topic

  • @CodingJourney

    @CodingJourney

    Жыл бұрын

    Thanks mate, glad you liked it!!

  • @shankarganesh4273
    @shankarganesh42732 жыл бұрын

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

  • @vokechamp
    @vokechamp3 жыл бұрын

    Awesome, Subscribed.

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

    Amazing!! Thanks man, welcome aboard 😉💙

  • @fredlaurent32
    @fredlaurent322 жыл бұрын

    Bravo, good job, merci 👍👍👍

  • @CodingJourney

    @CodingJourney

    2 жыл бұрын

    Oh thank you, my pleasure 🙂💙💙

  • @lauratsai1223
    @lauratsai12235 ай бұрын

    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🥺

  • @n33k01A
    @n33k01A3 жыл бұрын

    This tutorial is Gold.

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

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

  • @denhamk
    @denhamk11 ай бұрын

    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?

  • @jamietorio7034
    @jamietorio70343 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

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

  • @wulanamandadeviniluh2527
    @wulanamandadeviniluh2527 Жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    Жыл бұрын

    Super! Very glad you found this helpful!

  • @wulanamandadeviniluh2527

    @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

  • @annekhilji5595
    @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

  • @collinsattafuah2947
    @collinsattafuah29472 жыл бұрын

    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

  • @ShaharKBar
    @ShaharKBar3 жыл бұрын

    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

    @CodingJourney

    3 жыл бұрын

    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!! 😉

  • @ivanbarta2821
    @ivanbarta28213 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

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

  • @5oLitaryMan
    @5oLitaryMan4 жыл бұрын

    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

    @CodingJourney

    4 жыл бұрын

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

  • @luissolares419
    @luissolares4193 жыл бұрын

    thank you!!! good video.

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

    My pleasure 🙂 Glad you liked it!! 💙

  • @neowisetv9044
    @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

    @CodingJourney

    Жыл бұрын

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

  • @neowisetv9044

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

  • @alexmark6645
    @alexmark66458 ай бұрын

    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

    @CodingJourney

    8 ай бұрын

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

  • @eli_paule3804
    @eli_paule38043 жыл бұрын

    Thank you very much for this video.

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

    My pleasure 🙂 Glad it was helpful! Keep coding 😉

  • @davidarias9175
    @davidarias91753 жыл бұрын

    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

    @CodingJourney

    3 жыл бұрын

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

  • @davidarias9175

    @davidarias9175

    3 жыл бұрын

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

    @CodingJourney

    3 жыл бұрын

    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

    @davidarias9175

    3 жыл бұрын

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

  • @brunocamarinijr8717
    @brunocamarinijr87173 жыл бұрын

    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

    @CodingJourney

    3 жыл бұрын

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

  • @jeferson9011
    @jeferson90114 жыл бұрын

    Thank You! You got a new subs.

  • @CodingJourney

    @CodingJourney

    4 жыл бұрын

    Amazing! Welcome aboard 🙂

  • @somayerahbari8984
    @somayerahbari89842 жыл бұрын

    hi , when you click on "+" more than one could be openned

  • @matj5285
    @matj52854 жыл бұрын

    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

    @CodingJourney

    4 жыл бұрын

    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

    @matj5285

    4 жыл бұрын

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

    @matj5285

    4 жыл бұрын

    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.

  • @NamiSorako
    @NamiSorako2 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    2 жыл бұрын

    Oh thank you! My pleasure 🙂💙

  • @kareynjeri3982
    @kareynjeri39822 жыл бұрын

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

  • @md.bellalhushen9181
    @md.bellalhushen91814 жыл бұрын

    hi bro are it is possible to make a javascript to auto click on randomly link if visitor come from a specific website or website any page like gooogle.com or google.com/search _result or any blog.com or blog.com/anypage

  • @lookintomyeyes2681
    @lookintomyeyes26813 жыл бұрын

    best video ever

  • @tommyzDad
    @tommyzDad4 жыл бұрын

    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

    @CodingJourney

    4 жыл бұрын

    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!! 🙂

  • @MelkoR4111
    @MelkoR41112 жыл бұрын

    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

    @CodingJourney

    2 жыл бұрын

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

  • @luisestebanruiz9773
    @luisestebanruiz97734 жыл бұрын

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

  • @CodingJourney

    @CodingJourney

    4 жыл бұрын

    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

    @luisestebanruiz9773

    4 жыл бұрын

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

    @CodingJourney

    4 жыл бұрын

    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

    @luisestebanruiz9773

    4 жыл бұрын

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

    @CodingJourney

    3 жыл бұрын

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

  • @mrsanjeet74
    @mrsanjeet743 жыл бұрын

    can we make accordian table

  • @thinkdo9470
    @thinkdo94703 жыл бұрын

    great thanks so much

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

    My pleasure 🙂 Very glad you liked it!!

  • @daminirathod6596
    @daminirathod65962 жыл бұрын

    thank you so much sir

  • @CodingJourney

    @CodingJourney

    2 жыл бұрын

    My pleasure! Glad you liked it 🙂

  • @Frankslaboratory
    @Frankslaboratory4 жыл бұрын

    Well explained as usual !

  • @CodingJourney

    @CodingJourney

    4 жыл бұрын

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

  • @VideoNash
    @VideoNash2 жыл бұрын

    thanks

  • @manavgupta676
    @manavgupta6762 жыл бұрын

    awesome

  • @CodingJourney

    @CodingJourney

    2 жыл бұрын

    🙏💙

  • @nasim6778
    @nasim67784 жыл бұрын

    thank you so much

  • @CodingJourney

    @CodingJourney

    4 жыл бұрын

    My pleasure 🙂 Very glad you liked it!!

  • @user-dg8ys
    @user-dg8ys10 ай бұрын

    Thanks Malaka!

  • @CodingJourney

    @CodingJourney

    9 ай бұрын

    Hahah! Love it 😂

  • @XxAHMEDxXGamer
    @XxAHMEDxXGamer2 жыл бұрын

    It is really great and very excellent, but I want for your permission a way to communicate with you. I want to explain to you a simple problem that I encounter when opening the accordion. I hope that you will help me solve it. Thank you

  • @benthompson4742
    @benthompson47423 жыл бұрын

    Help! Trying to use this and put images and content in it. I can do it for one accordian item but when i try and duplicate that the images just disappears!

  • @CodingJourney

    @CodingJourney

    3 жыл бұрын

    Hey man! You should be able to add any kind of content without any problem! Feel free to send me a link to your project so that I could have a look. All the best, keep coding!! 😉

  • @somtechacademy
    @somtechacademy3 жыл бұрын

    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

    @CodingJourney

    3 жыл бұрын

    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

    @somtechacademy

    3 жыл бұрын

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

  • @debby18ful
    @debby18ful3 жыл бұрын

    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

    @CodingJourney

    3 жыл бұрын

    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

    @debby18ful

    3 жыл бұрын

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

  • @nicolasshattaoula4881
    @nicolasshattaoula48814 жыл бұрын

    Keep going strong, much love!

  • @CodingJourney

    @CodingJourney

    4 жыл бұрын

    My superhero!! 🦸‍♂️💙🙂

  • @tompain1985
    @tompain19854 жыл бұрын

    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

    @CodingJourney

    4 жыл бұрын

    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

    @tompain1985

    4 жыл бұрын

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

    @CodingJourney

    4 жыл бұрын

    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

    @tompain1985

    4 жыл бұрын

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

    @CodingJourney

    4 жыл бұрын

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