https://nordlyscosmetics.com/wp-content/themes/shoptimizer/assets/js/pdp-accordions.js?ver=1.0.0

1const details = document.querySelectorAll( '.summary details' );
2
3details.forEach( ( targetDetail ) => {
4  targetDetail.addEventListener( 'click', () => {
5    details.forEach( ( detail ) => {
6      if ( detail !== targetDetail ) {
7        detail.removeAttribute( 'open' );
8      }
9    } );
10  } );
11} );
12
13class Accordion {
14  constructor( el ) {
15    this.el = el;
16    this.summary = el.querySelector( 'summary' );
17    this.content = el.querySelector( '.cg-accordion-item' );
18    this.animation = null;
19    this.isClosing = false;
20    this.isExpanding = false;
21    this.summary.addEventListener( 'click', ( e ) => this.onClick( e ) );
22  }
23
24  onClick( e ) {
25
26    e.preventDefault();
27    this.el.style.overflow = 'hidden';
28    if ( this.isClosing || ! this.el.open ) {
29      this.open();
30    } else if ( this.isExpanding || this.el.open ) {
31      this.shrink();
32    }
33  }
34
35  shrink() {
36    this.isClosing = true;
37    const startHeight = `${this.el.offsetHeight}px`;
38    const endHeight = `${this.summary.offsetHeight}px`;
39    if ( this.animation ) {
40      this.animation.cancel();
41    }
42    this.animation = this.el.animate( {
43      height: [ startHeight, endHeight ]
44    }, {
45      duration: 200,
46      easing: 'ease-out'
47    } );
48    this.animation.onfinish = () =>

48 this.onAnimationFinish( false );
49    this.animation.oncancel = () => this.isClosing = false;
50  }
51
52  open() {
53    this.el.style.height = `${this.el.offsetHeight}px`;
54    this.el.open = true;
55    window.requestAnimationFrame( () => this.expand() );
56  }
57
58  expand() {
59    this.isExpanding = true;
60    const startHeight = `${this.el.offsetHeight}px`;
61    const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
62    if ( this.animation ) {
63      this.animation.cancel();
64    }
65    this.animation = this.el.animate( {
66      height: [ startHeight, endHeight ]
67    }, {
68      duration: 200,
69      easing: 'ease-out'
70    } );
71    this.animation.onfinish = () => this.onAnimationFinish( true );
72    this.animation.oncancel = () => this.isExpanding = false;
73  }
74
75  onAnimationFinish( open ) {
76    this.el.open = open;
77    this.animation = null;
78    this.isClosing = false;
79    this.isExpanding = false;
80    this.el.style.height = this.el.style.overflow = '';
81  }
82}
83
84document.querySelectorAll( '.summary details' ).forEach( ( el ) => {
85  new Accordion( el );
86} );