Responsive accordion

@Djole-zr congrats on completing this challenge🎉🎉

There are quite a few ways to add transition on accordions. e.g.

• You can use plain css to animate accordions first, create a new animation using @keyframes

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 100;
  }
}

Before you add the transition you should use a class add it on your p tag which doesn't have any class by default. It get's a .show tag when .question is clicked. We need to change it!. Add the following classes to it (answer, hidden).

.answer {
  opacity: 0;
  animation: fade-in 200ms ease 0ms 1 alternate forwards;
}

.hidden {
  display: hidden;
}

Then in js just toggle between hidden class whenever the question div is clicked

• Another way is to use max-height as height is not an animatable property. W3schools have a very good tutorial on it you can check it out here How to create an animatable accordion

I hope you found this helpful👍👍

Have a nice day and happy coding my friend😄