HTML & CSS Only

Community feedback

• 

  P

  Julien Gilbert•500

  @juliengDev

  Posted 7 months ago

  Hi @nvalline, Hope you are doing fine

  Im going to try to anwser to the animation question you have.

  This how i approach the problem myself :

  1. I used CSS transitions for smooth animations, particularly on the max-height property.

  2. Instead of toggling a hidden attribute, I manipulated the max-height of the panel:

     • For closed panels: max-height: 0px
     • For open panels: max-height: panel.scrollHeight + "px"

  3. I added a CSS transition on the max-height property in our stylesheet:

     .accordion-panel {
       transition: max-height 0.3s ease-out;
       overflow: hidden;
     }
     

  4. In the JavaScript, I updated the toggleAccordion method to set the appropriate max-height:

     if (expand) {
       panel.style.maxHeight = panel.scrollHeight + "px";
     } else {
       panel.style.maxHeight = "0px";
     }
     

  5. I also added a visible class to control opacity for a fade-in effect:

     .accordion-panel {
       opacity: 0;
       transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
     }
     .accordion-panel.visible {
       opacity: 1;
     }
     

  This solution provides a smooth animation when opening and closing accordion panels, addressing the challenge mentioned in the review. It combines CSS transitions with JavaScript manipulation of element properties to achieve the desired effect without relying on complex libraries or excessive code.

  It might have another solution, but here is mine, hope it helps you to understand more the concept behind the effect.

  00

  Marked as helpful