How can I add smooth transitions to collapsible rows in the Dawn theme?

[Official-Kortez]

Hello everyone,

I am trying to add smooth open/close transitions on the default collapsible rows of Shopify in my theme, and I cannot seem to find a decent tutorial to do that. Therefore, I decided to ask for your help since this place has helped me solve multiple other problems in the past!
Your help and ideas are much appreciated!

Website: official-kortez.com

Theme: DAWN (Latest)

[sahilsharma9515]

Hi @Official-Kortez this can be done with the help of custom coding, I can provide you the base code, through which you can accomplish this, because providing you the exact code I will need the access of your store, so that I can see the code file, but here is the base code, you can edit it according to your theme files and it will work well.

CSS Code:

.collapsible .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.collapsible.active .content {
  max-height: 200px; /* Change this value to fit your content */
}

Javascript Code:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var headers = document.querySelectorAll('.collapsible .header');
    headers.forEach(function(header) {
      header.addEventListener('click', function() {
        var content = this.nextElementSibling;
        content.classList.toggle('active');
      });
    });
  });
</script>

Note: You need to edit it according to your theme files.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[Official-Kortez]

Hey Sahilsharma9515

Thank you for your response!
I have tried adding the above code into my collapsible-content.css file and theme.liquid, but it doesn't work.
Into which file should I add the above code you provided? Thank you in advance!

[sahilsharma9515]

Hi @Official-Kortez As mentioned in the previous message that it is a base code, just copy pasting the entire code will not work, you need to edit the code according to your theme files.

If you need exact code then I need to look into the theme code files so that I can provide you the exact code.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[Official-Kortez]

@sahilsharma9515 

Please request access to my Shopify! 
Request code is : 5024