Adding Animation to FAQ Section

Store Design
, , , ,
1

Hi guys,

I’d like to add a smooth animation for expanding answers in the “Frequently Asked Questions” (FAQ) section.

Currently, I’m using the default Shopify animation, but I’d prefer something smoother.

Here’s my store so you can see how it looks now: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll all the way down to see the FAQ section).

And here’s the store that has the effect I want: https://tomnoske.store/products/cinema-luts
(Again, scroll all the way down to see the FAQ section).

Thanks so much for your help!
Tim

2

Hope this guide is helpful to you!

  1. Log in to Shopify > Online Store > Customize (https://prnt.sc/JqzLGYNkU1X0).
  2. Go to Theme Settings > Custom CSS (https://prnt.sc/pyPhZM5u885c).
  3. Copy the CSS code below, paste it into the Custom CSS box, and click Save.
.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);
}
3

Brother, you’re a legend! Thank you so much!

4

Hey brother, would you know how to add the animation so that it works on MOBILE too?

Here is link to my store: https://1049xn-ya.myshopify.com/collections/all

I’d really appreciate an answer.

Thank you so much

Tim