CSS Code adjustment

Store Design
, , , , , ,
1

Hi, I’ve added this code to base.css for editing the collapsible content section:

.accordion details::details-content {
display: block;
margin-inline: 2rem;
block-size: 0;
overflow: hidden;
transition-property: block-size, content-visibility;
transition-duration: 0.3s;
transition-behavior: allow-discrete;
transition-timing-function: ease-out;
}

.accordion details[open]::details-content {
block-size: auto;
block-size: calc-size(auto, size);
}
details .accordion__content {
will-change: transform;
transform: translateY(25px);
transition: transform .5s ease;
}
details[open] .accordion__content{
transform: translateY(0);
}

It primarily ensures smooth animation for opening and closing the answers. However, on the first attempt to open (after refreshing the store), the animation looks different compared to subsequent openings. I’d like the animation on the first click to always be the same as the second one—so the content smoothly slides up from below.

Here’s my store: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll all the way down to see the collapsible content section.)

Additionally, is it possible to add this animation for mobile as well?

Thanks a lot for your help,
Tim

2

The issue with the animation on the first click is likely due to the browser not having a “starting state” for the animation when the collapsible content is initially hidden. This can happen if the content visibility or height hasn’t been fully calculated before the animation starts.

this is updated

.accordion details {
  overflow: hidden;
  content-visibility: hidden;
  transition: content-visibility 0s, block-size 0.3s ease-out, transform 0.5s ease;
  transform: translateY(25px);
}

.accordion details[open] {
  content-visibility: visible;
  transform: translateY(0);
}

.accordion details::details-content {
  display: block;
  margin-inline: 2rem;
  block-size: auto;
}

.accordion__content {
  will-change: transform;
  transform: translateY(25px);
  transition: transform 0.5s ease;
}

details[open] .accordion__content {
  transform
3

Hey, thanks for the feedback, but it’s not working. When I replaced the old code with yours, the entire section disappeared.