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

Hi @CreatorTim ,

After our initial check, it seems that during the first load, some CSS or JS files responsible for styling this section may not have fully loaded, leading to minor display issues.

To address this, it would require adjustments to the theme code and a review of the loading order. Unfortunately, I am am unable to deeply intervene in your theme’s code.

Best,

Daisy

3

Ohh, okay, if you need it, I can enable that for you.

But do you know how to add an animation for expanding and collapsing the answers in the collapsible content?

4

Hi @CreatorTim ,

Unfortunately, I do not know how to do it. Hope you can understand.

Best,

Daisy