FAQ accordion using HTML, CSS, JavaScript

[@TochiEmenine]

A code that actually works, thank you. Really straightforward and short.

[@salentipy]

This is a wonderful video! I'm just learning JavaScript and watching it done line-by-line is EXTREMELY helpful! Thank you!

[@iuseflare]

really straightfoward and readable code. thanks!

[@АвтопилотКраснодар]

const faqs = document.querySelectorAll(".faq");
faqs.forEach(faq => {
const question = faq.querySelector(".question");
const answer = faq.querySelector(".answer");
question.addEventListener("click", () => {
if (faq.classList.contains("active")) {
faq.classList.remove("active");
answer.style.maxHeight = null;
} else {
// закрытие других активных блоков
faqs.forEach(otherFaq => {
if (otherFaq.classList.contains("active")) {
otherFaq.classList.remove("active");
otherFaq.querySelector(".answer").style.maxHeight = null;
}
});
faq.classList.add("active");
answer.style.maxHeight = answer.scrollHeight + "px";
}
});
});
added hiding inactive blocks

[@chethinarandidu4371]

Thanks

[@efekanefe442]

Thanks for the max-height trick i was trying to send my answers upwards with translateY and negative margin top values :D Finally making accordion components with animations. Have a nice day

[@mozcoder]

Thank you for share this amazing video, you helped-me very much.

[@jeanyvesarnold3519]

Thanks you very much

[@al4n250]

Fantastic video. I will for sure use some of the tricks that you have used.

[@tasneemayham974]

THANK YOU THAT WAS REALLLYY COOOLL!!!!!!!!!

[@mudasarhussain2907]

A.o.A!
Ur effort is really helpful for us,thanks alot

[@Dreamingofrainbows]

this tutorial was amazing, wow, I've learned so many new things and also new tricks about what I've used before, amazing! thank you, I'll be coming back for more tutorials!

[@khasanboyerkinov]

thank you bro

[@doneilchapman1542]

Really nice tutorial

[@jaspar797]

Great, thank you very much!!

[@hadiqadimi9540]

very good thank you

[@wetsand7379]

thank you, this was really simple to follow.

[@okolipeace774]

Thank you for this tutorial, it's really helpful and amazing.
I learnt so much from it

[@dhanalakshmip1645]

Thakyou so so muchhhhhhh😍😍😍😍

[@alexiscrespo1783]

Nice video !!! Good job bro, thanks !

[@londonching3343]

Thank you bro, great video

[@vivek5147]

Plz source code

[@swapnildhiman2032]

Thanks it is really help full

[@ayubitv03]

Thank you bro..

[@aimbotcz8033]

thank you so much man😭

[@xayrullayevzafar]

Thank you very much!

[@2kproductions1]

thanks man👏👏

[@nikolanidzeks]

Awesome job !

[@catalinamarziali9786]

Thank you very much! This tutorial was so helpful

[@carlosz1858]

thanks bro, u helped me so much

[@mudasarhussain2907]

Can uh help me bro?

[@abdulwaarithkehinde955]

Really nice tutorial. Very simple to follow. Thanks a lot for this.

[@IBRAHEMAL-KAMEL]

thank you so much

[@mountmidia6780]

Thank you!

[@adnan8465]

thank you bro ,you have earned my respect

[@sanadelayan688]

Quick question was it responsive to you or not

[@godmodeloss9345]

Thank you! You're help me! ;)

[@shivanand0297]

nice

[@iCanCombo.]

What do you use to autocomplete in css?

[@atulcodex7730]

Thank you :)

[@GennyMilan-e6d]

thanks :)

[@pawpawqwertyuiop]

под музычку норм)

[@sofaking6642]

good shiz

[@lilyyeh8607]

thank you~~!

[@sephyrion9207]

@Developer Empire
Thank you, all of it looks very good! Can you suggest a few excellent resources from where one could learn about SVG and advanced CSS? One of your lines there in CSS (line 65 I believe,) looks advanced to me, so I'd like to learn.

[@alini9749]

thanks

[@ob5804]

What if height of ech content is different?? Could you make a video when we 2-3 accordions js??

[@akidzul7748]

this helped so much, thank you! but can anyone explain why my arrow is only appearing half :( its like a half-v and looks more like a backslash for some reason. i think i followed the code closely but still couldnt determine what went wrong..would love to get some insight on this!

[@Ditzj]

I had the same. Depends on your background. I had a white background, and then the white SVG line obviously disappears and the only part remaining is the black fill of the triangle. You would need to set: stroke="black" (or any color you need) and fill="transparant" (in the path options) to get rid of the small black triangle. The way it was shown here, it will only look good on a black background.

[@ezajhossain]

@@Ditzj thank you ❤️

[@yskthegamer9033]

@@Ditzj where exactly is "fill" ?

[@Ditzj]

@@yskthegamer9033 as an example:

[@skillscrib6434]

Do you have a document where i can copy this code both Html and css

[@aidonline51]

please i need it too

[@Techno_2709]

source code pls

[@mudasarhussain2907]

But 1thing which can't understand (where is "active,s class ")plz help me

[@Ditzj]

class=active get's set in the javascript when you click on the specific div-element

[@lifeisbeautifu1]

Thank you

[@ThisIsAbrarKhan]

How can we implement in blogger template

[@Ludo045]

i just dont fucking get it.. we have the same structure yet it doesnt work in my project..

[@andressmendess]

me either, did you get it?

[@yeyintaung9839]

@@andressmendess I don't get it either. I copied the exact same thing and it still isn't working

[@MarcusStevens-v9m]

Jerde Hollow

[@BrendaMartinez-o9z]

Jerad Forge

[@jewelofnile2424]

Why do You set max 300? How do You know how much text everyone uses? For me it's bad example of accordion because it's not for future projects where you could have more text.

[@adziak]

set max to fit-content

[@maridurai6178]

What this design name

[@cotnegviniashvili5019]

can u give source cod?

[@saidibra9231]

when you click on another one is not closing ,?

[@adnan8465]

you are right, other remains open

[@Ditzj]

It would have to look like this:
faq.addEventListener("click", () => {
if(!faq.classList.contains("active")){
faqs.forEach(faq => {
faq.classList.remove('active');
})}
faq.classList.toggle("active");
});
So check if the current clicked on FAQ is already active. If not, then remove the active class from all items, otherwise just toggle the active state.

[@saidibra9231]

@@Ditzj thank you

[@alexandrarudman1478]

Alguien puede decirme los códigos para que abra solo 1 respuesta, al darle clic que se oculte la anterior.????

[@vanshkhera206]

is it responsive??

[@AmirHossein_x86]

yes,was

[@KallieLoggins-o4w]

Enid Fork

[@lolerkapich]

gj

[@bennisa8102]

Mine has more space between the title and the paragraph regardless of what margin or padding I try to use. Can someone help? The code is the same. Trust me. I've checked.

[@angelablanca7456]

Thank Youuuu

[@ferni777]

can you please upload the source code?

[@shardulpandey3]

svg is not showing

[@kickdoe6793]

The solution is not bad, but if you do not know the final maximum height, then difficulties arise here, if you specify the maximum height in auto, then the animation stops working, I still have not found solutions to this issue, if someone has a solution, please share

[@hedikharouf297]

You can set the max-height to fit-content ( .faq.active .answer{max-height: fit-content;}

[@kickdoe6793]

@@hedikharouf297 When you specify this property, the animation stops working.

[@zxero69]

I know I'm late, but if you want to do it without set max-height then u should put transform translateY(-100%) instead, and overflow hidden. Then for active class just bring back translate to 0

[@HussnainHussnain-tu8ny]

send me code
html css js

[@eliezer2987]

send me code please

[@syediqbalahmed3176]

vulu ... ocay ...

[@ryanjasperavendano2994]

souce code :>>

[@Duckergg.j]

It doesn't work 👎

[@MusicRachael136]

not a good tutorial!

[@gayathri-8-i6s]

source code plz