How to add animation to collapsible content on mobile

[CreatorTim]

Hey guys, I want to add an animation for expanding the answers in the collapsible content section.

I’ve already added an animation using this code, but it only works on desktop:

.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);

}

So I’d like to add a similar or even the same animation, but make it work on MOBILE.

Here’s the store where it works on mobile, and I’d like a similar animation: https://tomnoske.store/products/cinema-luts (Just scroll down, there’s the collapsible content)

And here’s the link to my store: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll down, there’s the collapsible content)

I ONLY NEED THIS ON MOBILE; IT WORKS ON DESKTOP!

Thanks so much,
Tim

[Dan-From-Ryviu]

Hi @CreatorTim 

I see it working the same with example site. 

[CreatorTim]

Hey, so when I tested it in the Shopify editor's mobile view, it worked fine. But when I opened the store on an actual mobile device, it didn’t work.

[codingHelp1]

To add animation you can use following CSS code to fix it

/* Default styles for collapsible content */
.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-timing-function: ease-out;
}

/* Expanded state */
.accordion details[open]::details-content {
  block-size: auto;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  .accordion details::details-content {
    display: block;
    margin-inline: 1rem; /* Adjust spacing for mobile */
    block-size: 0;
    overflow: hidden;
    transition-property: max-height, padding;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
  }

  .accordion details[open]::details-content {
    max-height: 300px; /* You can adjust this value based on the content size */
    padding: 10px; /* Add padding for smoother animation */
  }
}

[CreatorTim]

Hey, your code isn’t working. It made it stop working not only on mobile but also on desktop.

[codingHelp1]

Need to check code of theme then to fix it