Responsive accordion

Community feedback

• 

  Rajaul Islam Ratul•1,250

  @ratul0407Posted 11 months ago

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

  1