How to create Responsive Accordion in HTML CSS & JavaScript

[@nilamrakholiya5650]

Thank you for this tutorial, I am searching for alternate open-close accordion logic and you provide exact same concept. thanks

[@CodingLabYT]

Glad it was helpful!

[@j_u_d_y3041]

Wow~This is the ultimate accordion tutorial that I need! Thank you so much for sharing the process!

[@RobiulIslam-dn9mm]

Thank you. I badly needed this and after searching so many places, I found it at last.

[@redaloui]

Awesome, I hope you gather every sniper in one ui kit, or create ur own html template will love to buy it. Just focus not to deal heavily on javascript.

[@CodingLabYT]

I will try my best

[@deekshithpoojary262]

MMMMM Finally i got the perfect FAQ that I was looking from last 2 days

[@programmermobile5413]

I really thank you very much for providing the source code so I can be inspired

[@CodingLabYT]

No worries!, t will be uploaded soon.

[@randabadawy4170]

great job , this tutorial was usful to me . thanks

[@CodingLabYT]

Glad it helped

[@codingcinemax]

Amazing Tutorial 👌👌

[@CodingLabYT]

Thank you! Cheers!

[@64_bit_coding]

You're so awesome!

[@CodingLabYT]

You too!!

[@BilalMohammed1988]

Can you explain what do you mean by this "if (index1 != index2){ }" i have a confusion here.

[@AboudASalam]

the second forEach (in removeOpen function) will loop through all the accordions and by using the index2 we get the index of each accordion so we can use this condition and compare both the indexes (index1 and index2) to remove the class "open" from all accordions and reseting the height of each accordion to 0 except for the one that matches index1 (which we click on) to have one accordion opened for each click. if u still don't get it , open ur code studio and try it urself with printing both indexes in the console so u understand what do they stand for

[@ianxven]

thanks man, this helps alot

[@rayforever]

Can you do a big project like cloud drive website just like gdrive or mega drive , your chatting website was awesome , and also a simple OTP verification page too Yours sincerely Subscriber and supporter

[@aekungkuntorpon7057]

Thank you for this video 💯

[@CodingLabYT]

My pleasure!

[@ignatjmudi8754]

Bravo!!!!!!

[@siva5042]

Please do voice over it will be more understandable

[@davymaro]

Gracious, I cant find the sourcodes for downloading

[@CodingLabYT]

It will be uploaded soon.

[@ritik_p_]

Great tutorial! Subscribed! Will the source code be up soon?

[@CodingLabYT]

Now Link is available.

[@64_bit_coding]

You should do custom context menu

[@RealCatDe]

Nice video

[@CodingLabYT]

Thanks a ton

[@RealCatDe]

@@CodingLabYT np can you in the next video make login/sign in form with database?

[@Henry_Nunez]

Gracias 👉🔔

[@muygalan]

Is it possible to embed an into this?

[@musuhabadi2534]

your line 4 on js, you missed the dot (".header") . But why its still working ??

[@CodingLabYT]

I have selected header tag.

[@tasneemayham974]

Guys, does anyone know how to add a transition to the plus and minus to rotate? I tried, but couldn't figure it out. Thanks for any help!!

[@DarkaNight123]

Tenía un problema con que las opciones del acordeón no se abrían al tamaño del contenido. Lo pude solucionar con lo siguiente: description.style.height = description.scrollHeight + "px" ;

[@Архив-в3ц]

16:08

[@cgianimationtv1828]

please 🙏🥺 code entertainment website front page layout and entertainment website single page ...thanks 👍

[@hasibulhossainemon]

want this code

[@ClashRoyale-pt9zj]

muito bom

[@tolgabrandt]

get bootstrap

[@RianaBeaCPena]

Hello can you please help me on how to code this? Thanks! Write a JavaScript function to get the month name from a particular date. Test Data: °console.log(month_name(new Date("10/11/2009"))); °console.log(month_name(new Date("11/13/2014"))); Output : "October" "November"

[@lifeiscrazy2146]

const accordionContent = document.querySelectorAll(".accordion-content"); accordionContent.forEach((item,index) => { let header = item.querySelector('header'); header.addEventListener("click", () =>{ item.classList.toggle("open"); let description = item.querySelector(".description"); if(item.classList.contains(open)){ description.style.height = '${description.scrollHeight}px'; }else{ description.style.height = "0px"; item.querySelector("react-icons/ai").classList.replace("AiFillPlusCircle","AiFillMinusCircle"); } removeOpen(index); }) console.log(header); }) function removeOpen(index1){ accordionContent.forEach((item2,index2) =>{ if(index1 != index2){ item2.classList.remove("open"); let des = item2.querySelector(".description"); des.style.height = "0px"; item.querySelector("react-icons/ai").classList.replace("AiFillPlusCircle","AiFillMinusCircle"); } }) }