How to make Collapsible Row open in a smooth transition in Trade theme?

Store Design
1

I want the collapsible rows to open in a smooth transition instead of all at once in a snappy manner. I am using Trade 15.0.0.
Store link: kissaten.in

2

Hi,

Need to modify CSS and JavaScript

Add Smooth Transition in CSS and modify JavaScript for Smooth Transition

Example code css

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.collapsible-content.open {
  max-height: 500px; /* Adjust this value according to your content height */
}

Example code javascript

document.addEventListener('DOMContentLoaded', function() {
  var collapsibleTriggers = document.querySelectorAll('.collapsible-trigger');

  collapsibleTriggers.forEach(function(trigger) {
    trigger.addEventListener('click', function() {
      var content = trigger.nextElementSibling;

      if (content.classList.contains('open')) {
        content.classList.remove('open');
      } else {
        content.classList.add('open');
      }
    });
  });
});
3

Which files to add the code to?