https://www.isere.fr/themes/custom/theme-eolas-base/eolas_base/assets/utils/slideToggle.js

1/**
2 * @author Maxime Louf
3 * inspiré de https://w3bits.com/javascript-slidetoggle/
4 * @version 1.0.0
5 *
6 * @param element HTMLElement - La cible HTML
7 * @param duration number (optionnel) - La vitesse de l'animation. Défaut 500
8 * @export {slideUp, slideDown, slideToggle} - Exemple : new slideToggle(element, duration)
9 */
10
11export class slideUp {
12    constructor(element, duration) {
13        this.target = element;
14        this.duration = duration ?? 500;
15
16        this.doSlideUp();
17    }
18
19    doSlideUp() {
20        this.target.style.transitionProperty = 'height, margin, padding';
21        this.target.style.transitionDuration = this.duration + 'ms';
22        this.target.style.boxSizing = 'border-box';
23        this.target.style.height = this.target.offsetHeight + 'px';
24        this.target.offsetHeight;
25        this.target.style.overflow = 'hidden';
26        this.target.style.height = 0;
27        this.target.style.paddingTop = 0;
28        this.target.style.paddingBottom = 0;
29        this.target.style.marginTop = 0;
30        this.target.style.marginBottom = 0;
31        window.setTimeout( () => {
32            this.target.style.display = 'none';
33            this.target.style.removeProperty('height');
34            this.target.style.removeProperty('padding-top');
35            this.target.style.removeProperty('padding-bottom');
36            this.target.style.removeProperty('margin-top');
37            this.target.style.removeProperty('margin-bottom');
38            this.target.style.removeProperty('overflow');
39            this.target.style.removeProperty('transition-duration');
40            this.target.style.removeProperty('transition-property');
41        }, this.duration);
42    }
43}
44export class slideDown {
45    constructor(element, duration) {
46        this.target = element;
47        this.duration = duration ?? 500;
48
49        this.doSlideDown();
50    }
51
52    doSlideDown() {
53        this.target.style.removeProperty('display');
54        let display = window.getComputedStyle(this.target).display;
55
56        if (display === 'none')
57            display = 'block';
58
59        this.target.style.display = display;
60        let height = this.target.offsetHeight;
61        this.target.style.overflow = 'hidden';
62        this.target.style.height = 0;
63        this.target.style.paddingTop = 0;
64        this.target.style.paddingBottom = 0;
65        this.target.style.marginTop = 0;
66        this.target.style.marginBottom = 0;
67        this.target.offsetHeight;
68        this.target.style.boxSizing = 'border-box';
69        this.target.style.transitionProperty = "height, margin, padding";
70        this.target.style.transitionDuration = this.duration + 'ms';
71        this.target.style.height = height + 'px';
72        this.target.style.removeProperty('padding-top');
73        this.target.style.removeProperty('padding-bottom');
74        this.target.style.removeProperty('margin-top');
75        this.target.style.removeProperty('margin-bottom');
76        window.setTimeout( () => {
77            this.target.style.removeProperty('height');
78            this.target.style.removeProperty('overflow');
79            this.target.style.removeProperty('transition-duration');
80            this.target.style.removeProperty('transition-property');
81        }, this.duration);
82    }
83}
84
85export class slideToggle {
86    constructor(element, duration) {
87        this.target = element;
88        this.duration = duration ?? 500;
89
90        this.doSlideDownToggle();
91    }
92
93    doSlideDownToggle() {
94        if (window.getComputedStyle(this.target).display === 'none') {
95            new slideDown(this.target, this.duration);
96        } else {
97            new slideUp(this.target, this.duration);
98        }
99    }
100}