(Dawn Theme) Product Page Accordion, How to Add Smooth Transition

(Dawn Theme) Product Page Accordion, How to Add Smooth Transition

Chokken
Visitor
3 0 0

On Dawn's product page, the way the collapsible accordion blocks open is pretty abrupt and I want to add a transition to make it open smoothly but don't know how. Adding the css transition code doesn't seem to be the answer. Can anyone give share some code or lead me in the right direction to change this?

Replies 6 (6)

dmwwebartisan
Shopify Partner
12321 2551 3715

@Chokken 

Welcome to the Shopify community!
Please share your store URL!
I will check out the issue and provide the correct solution to you!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Chokken
Visitor
3 0 0
Chokken
Visitor
3 0 0
emilrojas
Excursionist
14 1 2

Did you get a answer? i also need this for Dawn

BryanIlman
Visitor
1 0 0

I also have the same problem. Have you found the solution?

Dhruv_Sagpariya
Shopify Partner
2 0 0
Add this code in "global.js". It works but not 100%. 

class
Accordion {
constructor(el) {
// Store the <details> element
this.el = el;
// Store the <summary> element
this.summary = el.querySelector('summary');
// Store the <div class="content"> element
this.content = el.querySelector('.accordion__content') || el.querySelector('.content');
 
// Store the animation object (so we can cancel it if needed)
this.animation = null;
// Store if the element is closing
this.isClosing = false;
// Store if the element is expanding
this.isExpanding = false;
// Detect user clicks on the summary element
this.summary.addEventListener('click', (e) => this.onClick(e));
}
 
onClick(e) {
// Stop default behaviour from the browser
e.preventDefault();
// Add an overflow on the <details> to avoid content overflowing
this.el.style.overflow = 'hidden';
// Check if the element is being closed or is already closed
if (this.isClosing || !this.el.open) {
this.open();
// Check if the element is being openned or is already open
} else if (this.isExpanding || this.el.open) {
this.shrink();
}
}
 
shrink() {
// Set the element as "being closed"
this.isClosing = true;
 
// Store the current height of the element
const startHeight = `${this.el.offsetHeight}px`;
// Calculate the height of the summary
const endHeight = `${this.summary.offsetHeight}px`;
 
// If there is already an animation running
if (this.animation) {
// Cancel the current animation
this.animation.cancel();
}
 
// Start a WAAPI animation
this.animation = this.el.animate({
// Set the keyframes from the startHeight to endHeight
height: [startHeight, endHeight]
}, {
duration: 500,
easing: 'ease-in'
});
 
// When the animation is complete, call onAnimationFinish()
this.animation.onfinish = () => this.onAnimationFinish(false);
// If the animation is cancelled, isClosing variable is set to false
this.animation.oncancel = () => this.isClosing = false;
}
 
open() {
// Apply a fixed height on the element
this.el.style.height = `${this.el.offsetHeight}px`;
// Force the [open] attribute on the details element
this.el.open = true;
// Wait for the next frame to call the expand function
window.requestAnimationFrame(() => this.expand());
}
 
expand() {
// Set the element as "being expanding"
this.isExpanding = true;
// Get the current fixed height of the element
const startHeight = `${this.el.offsetHeight}px`;
// Calculate the open height of the element (summary height + content height)
const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
 
// If there is already an animation running
if (this.animation) {
// Cancel the current animation
this.animation.cancel();
}
 
// Start a WAAPI animation
this.animation = this.el.animate({
// Set the keyframes from the startHeight to endHeight
height: [startHeight, endHeight]
}, {
duration: 400,
easing: 'ease-out'
});
// When the animation is complete, call onAnimationFinish()
this.animation.onfinish = () => this.onAnimationFinish(true);
// If the animation is cancelled, isExpanding variable is set to false
this.animation.oncancel = () => this.isExpanding = false;
}
 
onAnimationFinish(open) {
// Set the open attribute based on the parameter
this.el.open = open;
// Clear the stored animation
this.animation = null;
// Reset isClosing & isExpanding
this.isClosing = false;
this.isExpanding = false;
// Remove the overflow hidden and the fixed height
this.el.style.height = this.el.style.overflow = '';
}
}
 
document.querySelectorAll('details').forEach((el) => {
new Accordion(el);
});