https://www.healthdatasummit.ca/wp-content/themes/charlotte-theme/assets/js/readmore.js

1(function () {
2    function initReadMoreToggles() {
3        document.addEventListener("DOMContentLoaded", () => {
4            document.querySelectorAll(".swiper-container[data-slider-id]").forEach(slider => {
5                const buttons = slider.querySelectorAll(".read-more-toggle");
6                let currentOpen = null;
7
8                buttons.forEach(button => {
9                    button.addEventListener("click", function () {
10                        const index = this.getAttribute("data-slide-index");
11                        const content = slider.querySelector(`#desc-${index}`);
12                        const overlay = slider.querySelector(`#overlay-${index}`);
13                        const hasButton = content.getAttribute("data-has-button") === "1";
14                        const isExpanded = hasButton ? content.classList.contains("max-h-full") : content.classList.contains("h-auto");
15
16                        if (currentOpen && currentOpen.content !== content) {
17                            toggleContent(currentOpen.content, currentOpen.overlay, currentOpen.button, false);
18                            currentOpen = null;
19                        }
20
21                        toggleContent(content, overlay, this, !isExpanded);
22                        currentOpen = isExpanded ? null : { content, overlay, button: this };
23                    });
24                });
25
26                function toggleContent(content, overlay, button, expand) {
27                    const hasButton = content.getAttribute("data-has-button") === "1";
28                    if (hasButton) {
29                        content.classList.toggle("max-h-full", expand);
30                        content.classList.toggle("max-h-[180px]", !expand);
31                    } else {
32                        content.classList.toggle("h-auto", expand);
33                        content.classList.toggle("h-[250px]", !expand);
34                    }
35                    overlay.classList.toggle("hidden", expand);
36                    button.innerText = expand ? "READ LESS" : "READ MORE";
37                    button.classList.toggle("mt-4", expand);
38                }
39            });
40        });
41    }
42
43    // Initialize
44    function initialize() {
45        initReadMoreToggles();
46    }
47
48    initialize();
49})();