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

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!

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

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

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

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

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

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

thank you, this was really simple to follow.

Thank you very much! This tutorial was so helpful

Nice video !!! Good job bro, thanks !

Really nice tutorial

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

Thank you bro, great video

Awesome job !

Great, thank you very much!!

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

Thank you! You're help me! ;)

Plz source code

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

Thanks it is really help full

Thank you very much!

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

How can we implement in blogger template

very good thank you

Thank you bro..

thank you bro

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

thank you so much man😭

thanks man👏👏

Thakyou so so muchhhhhhh😍😍😍😍

thanks bro, u helped me so much

@mudasarhussain2907

2 жыл бұрын

Can uh help me bro?

thank you~~!

Thank you!

Thank you :)

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.

thank you so much

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:

nice

good shiz

thanks :)

can u give source cod?

thank you bro ,you have earned my respect

@sanadelayan688

2 жыл бұрын

Quick question was it responsive to you or not

thanks

can you please upload the source code?

source code pls

What this design name

svg is not showing

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

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

@aidonline51

10 ай бұрын

please i need it too

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

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.

@adriancygan9391

10 ай бұрын

set max to fit-content

is it responsive??

@AmirHossein_x86

2 жыл бұрын

yes,was

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

when you click on another one is not closing ,?

@adnan8465

2 жыл бұрын

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

Thank you

gj

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

7 ай бұрын

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

send me code html css js

@eliezer2987

9 ай бұрын

send me code please

vulu ... ocay ...

souce code :>>

It doesn't work 👎

not a good tutorial!

Thank Youuuu

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