Accordion (HTML, CSS and JavaScript)

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

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

50% 1

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

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

4 янв 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

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

Oh thanks mate! Very glad you liked it 🙂

@adriancygan9391 11 месяцев назад

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 2 года назад

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 2 года назад

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

@eduardoevaristoa 4 месяца назад

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 3 года назад

One of the best FAQ Accordion tutorials on RU-vid! Thank you!

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

Thanks man! Glad you liked it 🙂💙

@PatrykKarwowski-ww5ij 4 месяца назад

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

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

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

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

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 3 года назад

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

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

Awesome example. Very useful explanations at every coding step.

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

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

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

Amazing! Totally my pleasure 🙂💙💙

@MahendraSingh-od6cp 3 года назад

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

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

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

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

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 3 года назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 2 года назад

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

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

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

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

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

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

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

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

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 2 года назад

Thanks mate, totally my pleasure 🙂💙

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

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 2 года назад

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

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

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 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 3 года назад

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

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

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 3 года назад

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

@user-so8pb8nf6t 7 месяцев назад

This is exactly what I needed! Thank you sir

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

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 4 года назад

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

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

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

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

Excellent! Very glad to hear that 🙂💙

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

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

@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 4 года назад

sweet thank you for explaining with so much depth!

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

🙏 Very glad you liked it!! 💙🙂

@juststefan988 2 месяца назад

Great code, thank you for sharing this!

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

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

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

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

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

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

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

@GaurobBuragohain 27 дней назад

You saved my day bro... thanks

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

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

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

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

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

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

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

🙂 Very glad you liked it! Welcome aboard 😉💙

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

Well done and to the point

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

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

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

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

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

excelente tutorial!

@roguinpena1303 Год назад

Thanks, very clear and useful

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

Simple functions and clean code, perfect for beginners.

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

Oh thank you, glad you think so 🙂💙💙

@MrColdkilla69 Год назад

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

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

Underrated! This made me subscribed.

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

Oh thank you mate! Welcome aboard!! 💙🙂

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

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 3 года назад

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

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

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

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

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

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

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

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

Great video! Thanks

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

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

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

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

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

@James-dh6gt 4 года назад

Wonderful tutorial mate! Thanks 🧡

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

Thank you mate 😉🙂

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

This tutorial is Gold.

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

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

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

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

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

Oh thank you 🙏 My pleasure!! 🙂💙

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

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

well done!

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

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 4 года назад

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

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

you can also see here, how i create Another Awesome Accordion with html , css and javascript ( ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-APcGa1TBSIA.html

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

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

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

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

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

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

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

Oh thanks mate, my pleasure 🙂 Keep coding 💙💙

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

Great tutorial. Thank you.

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

My pleasure 🙂 Glad you liked it!

@5oLitaryMan 4 года назад

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 4 года назад

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

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

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 3 года назад

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

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

Bravo, good job, merci 👍👍👍

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

Oh thank you, my pleasure 🙂💙💙

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

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

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

My pleasure, glad you liked it!! I did make a tutorial about modals: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YARYSKySwhg.html hope it helps 🙂 All the best, keep coding!!!

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

Thank you very much for this video.

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

My pleasure 🙂 Glad it was helpful! Keep coding 😉

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

Great explanation about this topic

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

Thanks mate, glad you liked it!!

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

Awesome, Subscribed.

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

Amazing!! Thanks man, welcome aboard 😉💙

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

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

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

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

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

thank you!!! good video.

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

My pleasure 🙂 Glad you liked it!! 💙

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

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

@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

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

best video ever

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

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 3 года назад

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

@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 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 3 года назад

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

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

Thank You! You got a new subs.

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

Amazing! Welcome aboard 🙂

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

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

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

Well explained as usual !

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

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

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?

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

thanks

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

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

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

Oh thank you! My pleasure 🙂💙

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

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

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

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🥺

@alexmark6645 9 месяцев назад

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 9 месяцев назад

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

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

awesome

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

🙏💙

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

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

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

great thanks so much

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

My pleasure 🙂 Very glad you liked it!!

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

thank you so much

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

My pleasure 🙂 Very glad you liked it!!

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

thank you so much sir

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

My pleasure! Glad you liked it 🙂

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

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

@user-dg8ys 10 месяцев назад

Thanks Malaka!

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

Hahah! Love it 😂

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

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?

@denhamk 11 месяцев назад

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?

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

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 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 4 года назад

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

@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 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 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 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 4 года назад

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

2 года назад

thank you

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

My pleasure 🙂💙

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

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

@user-sj4oy1el5y 3 года назад

Gj!

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

Thanks man, very glad you liked it!!

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

best one

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

🙂 Thank you! Glad you liked it.

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

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 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 3 года назад

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

@front-endanimal6359 4 года назад

Nice accordion, man, you cool

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

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

@front-endanimal6359 4 года назад

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

@davidcesarquinterossarmien2701 Год назад

Gracias, me salvaste el orto! Te amo

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

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

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

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

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

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 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 3 года назад

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

@md.bellalhushen9181 4 года назад

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

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

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

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

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