How can I create a smooth collapsible product page in Dawn?

Store Design
1

Does anybody know how to make it open and close smooth?https://gyazo.com/af4f6fa1268fa3684fd8bc83c1944405

2

I’ve got it KINDA working but not really… it’s very buggy and laggy

.accordion__content {
  height: 0;
  margin-bottom: 1.5rem;
  overflow: hidden;
  padding: 0 0.6rem;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.accordion details[open] > .accordion__content {
  height: 150px;
}

https://i.gyazo.com/8a5a6bd4674762701d49918353a3acb9.mp4

3

@emilrojas

If you’re comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by

yes, please try this
https://codepen.io/idesignsmf/pen/WNxyewj
https://codepen.io/EthanMcFarlin/pen/yZLbGy

4

I solved it with this code:

.accordion__content {
  margin-bottom: 1.5rem;
  max-height: 0;
  overflow: hidden;
  padding: 0 0.6rem;
  font-size: 1.7rem;
}

.accordion details[open] > .accordion__content {
    max-height: 1000px;
-webkit-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
-o-transition: all 1.5s ease-in;
transition: all 1.5s ease-in;
  -webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}

But the closing animation is not working at all. It closes instantly