How to make collapsable rows open smoothly in Dawn theme?

Store Design
, , , ,
1

Hi. Does anyone know how can I make the collapsable rows open smoothly in dawn theme?

2

Hi @AndreiGhetu

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

HI @AndreiGhetu ,

Can you provide your storefront password

4

https://viellelondon.com

pass: 123123123

5

https://viellelondon.com

pass: 123123123

6

Hi @AndreiGhetu

It seems that your store password is wrong. Can you kindly share it with us again?

7

pispilac99

8

Hi @AndreiGhetu

Collapsible rows in Shopify are designed with some pretty special HTML elements, so it is quite difficult to create smooth animation for them. However, you can try our suggestion below. Although it is not optimized yet, it may partly meet your requirements:

  1. Go to Themes → select Edit code
![view - 2023-03-23T142118.714.png|1856x986](upload://u7qY1dEPbbvpaTjJpacKqxcDzpK.png)
  1. Navigate to the Assets folder → select the file collapsible-content.css and add the following code at the end of the file:
details summary {
  transition: margin 200ms ease-out;
}

details[open] summary {
  margin-bottom: 5px;
}

We hope that it will work for you.

1 Like
9

Can you help me my Dawn theme is 15.1 version, and I have already paste the code on my collapsible-content.css. Its not working for me

10
.accordion__content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease; opacity: 0; } details[open] .accordion__content { max-height: 300px; /* oder ein hoher Wert, der deinen Inhalt abdeckt */ opacity: 1; }
11

where i put this code