libreria-astro-lefebvre 0.0.28 → 0.0.30

package/src/components/Astro/Repetidor_2025_Tokyo.astro

@@ -1,57 +1,57 @@
----
-const {
-    title,
-    description,
-    buttonText,
-    buttonUrl,
-    showBtn,
-    items
-    } = Astro.props;
-
----
-<article class="w-full flex flex-col md:flex-row text-center items-center justify-center p-6 md:p-12 bg-cover bg-[url(https://assets.lefebvre.es/media/icons-2/png/icon-shield-228x248.png)] bg-[#F5F6FA] bg-no-repeat bg-position-[center_center] md:bg-auto md:bg-position-[-60px_center] rounded-2xl">
-    <div class="w-full md:w-2/3 flex flex-col text-left p-0 mb-4 md:pl-[140px]">
-        <h2 class="text-[28px] md:text-[2em] leading-[36px] md:leading-[46px] mb-[16px] font-poppins text-[#262626] font-normal">{title}</h2>
-        <div class="max-w-[900px] text-[#363942] font-inter font-normal text-base not-italic leading-[24px] flex flex-col gap-4 mb-8">
-            <p set:html={description}></p>
-        </div>
-        <div class="w-full flex">
-            {showBtn ? (
-                <div class="flex justify-center gap-2">
-                    <a href={buttonUrl} class="pl-0 lg:pl-[20px] font-inter font-semibold text-base text-[#001978] hover:text-[#262626] transition-all duration-300 cursor-pointer">{buttonText}</a>
-                    <div class="flex justify-center">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-                            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.7455 20.8049C7.43901 20.5263 7.41642 20.052 7.69505 19.7455L14.7364 12L7.69505 4.2545C7.41642 3.94801 7.43901 3.47367 7.7455 3.19504C8.05199 2.91641 8.52633 2.939 8.80496 3.24549L16.305 11.4955C16.565 11.7816 16.565 12.2184 16.305 12.5045L8.80496 20.7545C8.52633 21.061 8.05199 21.0836 7.7455 20.8049Z" fill="#001978"/>
-                        </svg>
-                    </div>
-                </div>
-                
-            ) : (
-                <div class="flex justify-center"></div>
-            )} 
-        </div>
-    </div>
-    <div class="w-full max-w-7xl flex flex-wrap p-0 lg:flex-nowrap md:p-4 justify-center lg:justify-end items-start ">
-        {items.map(item => (
-        <article class="w-1/3 flex-wrap md:w-1/3 md:flex-nowrap lg:w-1/2 p-1 py-[16px] md:p-[16px]">
-            <div class="w-full flex flex-col"> 
-                <div class="w-full">
-                    {item.link ? (
-                        <a href={item.link} class="w-full flex flex-col flex-1 justify-center items-center">
-                            <img class="max-w-[80px] w-fit mb-4" src={item.image} alt={item.altImage} />
-                            <p class="text-[14px] text-[#363942]" set:html={item.descriptionImage}></p>
-                        </a>
-                    ) : (
-                        <div class="w-full flex flex-col flex-1 justify-center items-center max-h-[94px]">
-                            <img class="max-w-[80px] w-fit mb-4" src={item.image} alt={item.altImage} />
-                        </div>
-                        <div class="w-full flex flex-col flex-1 justify-center items-center">
-                            <p class="text-[14px] text-[#363942]" set:html={item.descriptionImage}></p>
-                        </div>
-                    )}                    
-                </div>
-            </div>
-        </article>
-        ))}
-    </div> 
+---
+const {
+    title,
+    description,
+    buttonText,
+    buttonUrl,
+    showBtn,
+    items
+    } = Astro.props;
+
+---
+<article class="w-full flex flex-col md:flex-row text-center items-center justify-center p-6 md:p-12 bg-cover bg-[url(https://assets.lefebvre.es/media/icons-2/png/icon-shield-228x248.png)] bg-[#F5F6FA] bg-no-repeat bg-position-[center_center] md:bg-auto md:bg-position-[-60px_center] rounded-2xl">
+    <div class="w-full md:w-2/3 flex flex-col text-left p-0 mb-4 md:pl-[140px]">
+        <h2 class="text-[28px] md:text-[2em] leading-[36px] md:leading-[46px] mb-[16px] font-poppins text-[#262626] font-normal">{title}</h2>
+        <div class="max-w-[900px] text-[#363942] font-inter font-normal text-base not-italic leading-[24px] flex flex-col gap-4 mb-8">
+            <p set:html={description}></p>
+        </div>
+        <div class="w-full flex">
+            {showBtn ? (
+                <div class="flex justify-center gap-2">
+                    <a href={buttonUrl} class="pl-0 lg:pl-[20px] font-inter font-semibold text-base text-[#001978] hover:text-[#262626] transition-all duration-300 cursor-pointer">{buttonText}</a>
+                    <div class="flex justify-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.7455 20.8049C7.43901 20.5263 7.41642 20.052 7.69505 19.7455L14.7364 12L7.69505 4.2545C7.41642 3.94801 7.43901 3.47367 7.7455 3.19504C8.05199 2.91641 8.52633 2.939 8.80496 3.24549L16.305 11.4955C16.565 11.7816 16.565 12.2184 16.305 12.5045L8.80496 20.7545C8.52633 21.061 8.05199 21.0836 7.7455 20.8049Z" fill="#001978"/>
+                        </svg>
+                    </div>
+                </div>
+                
+            ) : (
+                <div class="flex justify-center"></div>
+            )} 
+        </div>
+    </div>
+    <div class="w-full max-w-7xl flex flex-wrap p-0 lg:flex-nowrap md:p-4 justify-center lg:justify-end items-start ">
+        {items.map(item => (
+        <article class="w-1/3 flex-wrap md:w-1/3 md:flex-nowrap lg:w-1/2 p-1 py-[16px] md:p-[16px]">
+            <div class="w-full flex flex-col"> 
+                <div class="w-full">
+                    {item.link ? (
+                        <a href={item.link} class="w-full flex flex-col flex-1 justify-center items-center">
+                            <img class="max-w-[80px] w-fit mb-4" src={item.image} alt={item.altImage} />
+                            <p class="text-[14px] text-[#363942]" set:html={item.descriptionImage}></p>
+                        </a>
+                    ) : (
+                        <div class="w-full flex flex-col flex-1 justify-center items-center max-h-[94px]">
+                            <img class="max-w-[80px] w-fit mb-4" src={item.image} alt={item.altImage} />
+                        </div>
+                        <div class="w-full flex flex-col flex-1 justify-center items-center">
+                            <p class="text-[14px] text-[#363942]" set:html={item.descriptionImage}></p>
+                        </div>
+                    )}                    
+                </div>
+            </div>
+        </article>
+        ))}
+    </div> 
 </article>

package/src/components/Astro/Repetidor_2025_Ubeda.astro

@@ -1,40 +1,40 @@
----
-const {
-    items = [],
-    } = Astro.props;
-
-    const structuredData = `<script type="application/ld+json">
-    {
-        "@context": "https://schema.org",
-        "@type": "ItemList",
-        "numberOfItems": ${items.length},
-        "itemListElement": [
-            ${items.map((item, index) => `{
-                "@type": "ListItem",
-                "position": ${index + 1},
-                "item": {
-                    "@type": "Thing",
-                    "name": "${item.title}",
-                    "description": "${item.description.replace(/"/g, '\\"').replace(/<[^>]*>/g, '')}"
-                }
-            }`).join(',')}
-        ]
-    }
-    </script>`;
----
-<section class="w-full flex items-center justify-center bg-[#001978]/4 py-[48px]">
-    <article class="flex flex-col items-center justify-center p-4">
-        <div class="flex flex-col md:flex-row items-center gap-4">
-            {items.map(item => (
-                <div class="w-full md:w-1/3 content-center flex flex-col flex-wrap h-full text-[#262626] nth-of-type-2:p-4 nth-of-type-2:border nth-of-type-2:border-y-1 nth-of-type-2:border-x-0 md:nth-of-type-2:border md:nth-of-type-2:border-x-1 md:nth-of-type-2:border-y-0 ">
-                    <p class="text-[40px] md:text-[56px] text-center leading-[48px] md:leading-[64px] mb-[16px] font-poppins font-semibold">{item.title}</p>
-                    <p 
-                    class="text-xl text-center font-inter font-normal leading-[28px] flex flex-col gap-4" 
-                    set:html={item.description}></p>
-                </div>
-            ))}
-        </div>
-    </article>
-</section>
-
+---
+const {
+    items = [],
+    } = Astro.props;
+
+    const structuredData = `<script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "ItemList",
+        "numberOfItems": ${items.length},
+        "itemListElement": [
+            ${items.map((item, index) => `{
+                "@type": "ListItem",
+                "position": ${index + 1},
+                "item": {
+                    "@type": "Thing",
+                    "name": "${item.title}",
+                    "description": "${item.description.replace(/"/g, '\\"').replace(/<[^>]*>/g, '')}"
+                }
+            }`).join(',')}
+        ]
+    }
+    </script>`;
+---
+<section class="w-full flex items-center justify-center bg-[#001978]/4 py-[48px]">
+    <article class="flex flex-col items-center justify-center p-4">
+        <div class="flex flex-col md:flex-row items-center gap-4">
+            {items.map(item => (
+                <div class="w-full md:w-1/3 content-center flex flex-col flex-wrap h-full text-[#262626] nth-of-type-2:p-4 nth-of-type-2:border nth-of-type-2:border-y-1 nth-of-type-2:border-x-0 md:nth-of-type-2:border md:nth-of-type-2:border-x-1 md:nth-of-type-2:border-y-0 ">
+                    <p class="text-[40px] md:text-[56px] text-center leading-[48px] md:leading-[64px] mb-[16px] font-poppins font-semibold">{item.title}</p>
+                    <p 
+                    class="text-xl text-center font-inter font-normal leading-[28px] flex flex-col gap-4" 
+                    set:html={item.description}></p>
+                </div>
+            ))}
+        </div>
+    </article>
+</section>
+
 <Fragment set:html={structuredData} />

package/src/components/Astro/Repetidor_2025_Yakarta.astro

@@ -1,204 +1,204 @@
----
-
-const {
-    items = [],
-    iframeSrc
-} = Astro.props;
-
-const idAccordion = 'js-acordeon-' + Math.random().toString(36).substring(2, 15);
-
-const structuredData = `<script type="application/ld+json">
-{
-    "@context": "https://schema.org",
-    "@type": "WebPageElement",
-    "name": "Interactive Content Carousel",
-    "description": "A rotating carousel component displaying multiple content items with videos",
-    "mainEntity": {
-        "@type": "ItemList",
-        "numberOfItems": ${items.length},
-        "itemListElement": [
-            ${items.map((item, index) => `{
-                "@type": "ListItem",
-                "position": ${index + 1},
-                "item": {
-                    "@type": "VideoObject",
-                    "thumbnailUrl": "${item.thumbnailUrl || ''}",
-                    "duration": "${item.duration || 'PT0M'}",
-                    "name": "${item.title || ''}",
-                    "description": "${item.description ? item.description.replace(/<[^>]*>/g, '').replace(/"/g, '\\"') : ''}",
-                    "contentUrl": "${item.iframeSrc || ''}",
-                    "embedUrl": "${item.iframeSrc || ''}",
-                    "uploadDate": "${new Date().toISOString()}",
-                    "duration": "PT0M",
-                    "interactionStatistic": {
-                        "@type": "InteractionCounter",
-                        "interactionType": "https://schema.org/WatchAction",
-                        "userInteractionCount": 0
-                    }
-                }
-            }`).join(',\n      ')}
-        ]
-    },
-    "interactionStatistic": {
-        "@type": "InteractionCounter",
-        "interactionType": "https://schema.org/ViewAction",
-        "userInteractionCount": 0
-    }
-}
-</script>`;
----
-
-
-<section class="w-full flex items-center justify-center py-2 md:py-[80px]">
-    <article class="w-full flex flex-col items-center justify-center">
-        <div class="w-2/5 flex justify-center items-center relative text-[56px] text-center font-poppins font-normal leading-[64px] mb-0 md:mb-[48px]">
-            <!-- <div class="flex bg-[#001978]/4 border border-[#B6B7BB] rounded-lg"> -->
-            <div class="flex gap-1 md:gap-8 items-center">
-                {items.map((item, index) => (
-                    <p class="text-base">
-                        {/* <a href={`#accordion${index + 1}`} class="btn py-[20px] px-[16px]">{item}</a> */}
-                        <button data-linkedto={`${idAccordion}${index + 1}`} 
-                        class={`
-                            btn py-[12px] px-[20px] leading-[24px] font-inter
-                            cursor-pointer border border-transparent bg-F2F3F8
-                            hover:border hover:border-[#5F6168] 
-                            hover:bg-white rounded-lg ${idAccordion}button 
-                            ${item.default ? 'active' : ''}
-                            text-gray-100 max-w-[40px] max-h-[20px] text-[0px]
-                            md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
-                            `}
-                        >{item.name}</button>
-                    </p>
-                ))}
-            </div> 
-        </div>
-        <div class="w-full px-6 md:w-3/5 md:px-[0] col my-[40px]">
-            {items.map((item, index) => (
-                <div id={`${idAccordion}${index + 1}`} class={`${item.default ? '' : 'hidden'} collapse-arrow ${idAccordion}item`}>
-                    <div class="collapse-title" id={`accordion${index + 1}`}>
-                        <div class="w-full flex flex-col lg:flex-row flex-1 gap-[48px]">
-                            <div class="w-full flex flex-col justify-start">
-                                <h3 class="text-[28px] md:text-[32px] leading-[36px] mb-[8px] text-[#363942] font-semibold not-italic font-poppins">{item.title}</h3>
-                                <p class="text-[#363942] font-poppins font-normal text-[20px] not-italic leading-[28px]" set:html={item.description}></p>
-                            </div>
-                            <div class="w-full lg:w-2/2 flex items-start">
-                                {/* <img src="/assets/images/genial/gradient-bg.webp" alt="Imagen" class="w-full h-auto rounded-xl" /> */}
-                                <video autoplay loop muted playsinline class="w-full h-auto rounded-xl">
-                                    <source src={item.iframeSrc} type="video/mp4" />
-                                </video> 
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            ))}
-        </div>
-    </article>
-</section>
-
-<style>
-    .bg-F2F3F8 {
-        background-color: #F2F3F8;
-    }
-    .active{
-        background-color: #ffffff;
-        border: 1px solid #5F6168;
-        color: black;
-        max-width: none;
-        max-height: none;
-        font-size: 16px;
-
-        &:hover{
-            background-color: #ffffff;
-            border: 1px solid #5F6168;
-        }
-    }
-</style>
-
-<script is:inline define:vars={{ idAccordion }}>
-
-
-let rotationInterval = null;
-let currentIndex = 0;
-let seconds = 4;
-
-const buttons = document.querySelectorAll(`.${idAccordion}button`);
-
-function startRotation() {
-    if (rotationInterval) return; // Already running
-    
-    rotationInterval = setInterval(() => {
-        if (buttons.length > 0) {
-            // Always move to next index first
-            currentIndex = (currentIndex + 1) % buttons.length;
-            // Nota David: Comentamos el click y liamos el chocho de debajo porque manda eventos en GTM            
-            // buttons[currentIndex].click();
-            // Reemplaza lo de arriba
-            const btn = buttons[currentIndex];
-            const linkedId = btn.getAttribute('data-linkedto');
-            const targetItem = document.getElementById(linkedId);
-
-            if (targetItem) {
-                const collapseCount = document.querySelectorAll(`.${idAccordion}item.collapse`).length;
-                const hiddenCount = document.querySelectorAll(`.${idAccordion}item.hidden`).length;
-                const desiredClass = collapseCount > hiddenCount ? 'collapse' : 'hidden';
-                
-                document.querySelectorAll(`.${idAccordion}item`).forEach(item => {
-                    if (item === targetItem) return;
-                    if (item.classList.contains(desiredClass)) return;                
-                    item.classList.add(desiredClass);
-                });
-                targetItem.classList.toggle(desiredClass);
-                
-                document.querySelectorAll(`.${idAccordion}button`).forEach(item => {
-                    if (item === btn) return;
-                    item.classList.remove('active');
-                });
-                btn.classList.toggle('active');
-            }
-
-        }
-    }, seconds * 3000);
-}
-
-function stopRotation() {
-    if (rotationInterval) {
-        clearInterval(rotationInterval);
-        rotationInterval = null;
-    }
-}
-
-// Start automatic rotation
-startRotation();
-
-
-document.querySelectorAll(`.${idAccordion}button`).forEach(btn => {
-    btn.addEventListener('mouseenter', stopRotation);
-
-    btn.addEventListener('click', (e) => {
-        const linkedId = btn.getAttribute('data-linkedto');
-        const targetItem = document.getElementById(linkedId);
-        if (targetItem) {
-
-            const collapseCount = document.querySelectorAll(`.${idAccordion}item.collapse`).length;
-            const hiddenCount = document.querySelectorAll(`.${idAccordion}item.hidden`).length;
-            const desiredClass = collapseCount > hiddenCount ? 'collapse' : 'hidden';
-            
-            document.querySelectorAll(`.${idAccordion}item`).forEach(item => {
-                if (item === targetItem) return;
-                if (item.classList.contains(desiredClass)) return;                
-                item.classList.add(desiredClass);
-            });
-            targetItem.classList.toggle(desiredClass);
-            
-
-            document.querySelectorAll(`.${idAccordion}button`).forEach(item => {
-                if (item === btn) return;
-                item.classList.remove('active');
-            });
-            btn.classList.toggle('active');  
-        }       
-    });
-});
-</script>
-
+---
+
+const {
+    items = [],
+    iframeSrc
+} = Astro.props;
+
+const idAccordion = 'js-acordeon-' + Math.random().toString(36).substring(2, 15);
+
+const structuredData = `<script type="application/ld+json">
+{
+    "@context": "https://schema.org",
+    "@type": "WebPageElement",
+    "name": "Interactive Content Carousel",
+    "description": "A rotating carousel component displaying multiple content items with videos",
+    "mainEntity": {
+        "@type": "ItemList",
+        "numberOfItems": ${items.length},
+        "itemListElement": [
+            ${items.map((item, index) => `{
+                "@type": "ListItem",
+                "position": ${index + 1},
+                "item": {
+                    "@type": "VideoObject",
+                    "thumbnailUrl": "${item.thumbnailUrl || ''}",
+                    "duration": "${item.duration || 'PT0M'}",
+                    "name": "${item.title || ''}",
+                    "description": "${item.description ? item.description.replace(/<[^>]*>/g, '').replace(/"/g, '\\"') : ''}",
+                    "contentUrl": "${item.iframeSrc || ''}",
+                    "embedUrl": "${item.iframeSrc || ''}",
+                    "uploadDate": "${new Date().toISOString()}",
+                    "duration": "PT0M",
+                    "interactionStatistic": {
+                        "@type": "InteractionCounter",
+                        "interactionType": "https://schema.org/WatchAction",
+                        "userInteractionCount": 0
+                    }
+                }
+            }`).join(',\n      ')}
+        ]
+    },
+    "interactionStatistic": {
+        "@type": "InteractionCounter",
+        "interactionType": "https://schema.org/ViewAction",
+        "userInteractionCount": 0
+    }
+}
+</script>`;
+---
+
+
+<section class="w-full flex items-center justify-center py-2 md:py-[80px]">
+    <article class="w-full flex flex-col items-center justify-center">
+        <div class="w-2/5 flex justify-center items-center relative text-[56px] text-center font-poppins font-normal leading-[64px] mb-0 md:mb-[48px]">
+            <!-- <div class="flex bg-[#001978]/4 border border-[#B6B7BB] rounded-lg"> -->
+            <div class="flex gap-1 md:gap-8 items-center">
+                {items.map((item, index) => (
+                    <p class="text-base">
+                        {/* <a href={`#accordion${index + 1}`} class="btn py-[20px] px-[16px]">{item}</a> */}
+                        <button data-linkedto={`${idAccordion}${index + 1}`} 
+                        class={`
+                            btn py-[12px] px-[20px] leading-[24px] font-inter
+                            cursor-pointer border border-transparent bg-F2F3F8
+                            hover:border hover:border-[#5F6168] 
+                            hover:bg-white rounded-lg ${idAccordion}button 
+                            ${item.default ? 'active' : ''}
+                            text-gray-100 max-w-[40px] max-h-[20px] text-[0px]
+                            md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
+                            `}
+                        >{item.name}</button>
+                    </p>
+                ))}
+            </div> 
+        </div>
+        <div class="w-full px-6 md:w-3/5 md:px-[0] col my-[40px]">
+            {items.map((item, index) => (
+                <div id={`${idAccordion}${index + 1}`} class={`${item.default ? '' : 'hidden'} collapse-arrow ${idAccordion}item`}>
+                    <div class="collapse-title" id={`accordion${index + 1}`}>
+                        <div class="w-full flex flex-col lg:flex-row flex-1 gap-[48px]">
+                            <div class="w-full flex flex-col justify-start">
+                                <h3 class="text-[28px] md:text-[32px] leading-[36px] mb-[8px] text-[#363942] font-semibold not-italic font-poppins">{item.title}</h3>
+                                <p class="text-[#363942] font-poppins font-normal text-[20px] not-italic leading-[28px]" set:html={item.description}></p>
+                            </div>
+                            <div class="w-full lg:w-2/2 flex items-start">
+                                {/* <img src="/assets/images/genial/gradient-bg.webp" alt="Imagen" class="w-full h-auto rounded-xl" /> */}
+                                <video autoplay loop muted playsinline class="w-full h-auto rounded-xl">
+                                    <source src={item.iframeSrc} type="video/mp4" />
+                                </video> 
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    </article>
+</section>
+
+<style>
+    .bg-F2F3F8 {
+        background-color: #F2F3F8;
+    }
+    .active{
+        background-color: #ffffff;
+        border: 1px solid #5F6168;
+        color: black;
+        max-width: none;
+        max-height: none;
+        font-size: 16px;
+
+        &:hover{
+            background-color: #ffffff;
+            border: 1px solid #5F6168;
+        }
+    }
+</style>
+
+<script is:inline define:vars={{ idAccordion }}>
+
+
+let rotationInterval = null;
+let currentIndex = 0;
+let seconds = 4;
+
+const buttons = document.querySelectorAll(`.${idAccordion}button`);
+
+function startRotation() {
+    if (rotationInterval) return; // Already running
+    
+    rotationInterval = setInterval(() => {
+        if (buttons.length > 0) {
+            // Always move to next index first
+            currentIndex = (currentIndex + 1) % buttons.length;
+            // Nota David: Comentamos el click y liamos el chocho de debajo porque manda eventos en GTM            
+            // buttons[currentIndex].click();
+            // Reemplaza lo de arriba
+            const btn = buttons[currentIndex];
+            const linkedId = btn.getAttribute('data-linkedto');
+            const targetItem = document.getElementById(linkedId);
+
+            if (targetItem) {
+                const collapseCount = document.querySelectorAll(`.${idAccordion}item.collapse`).length;
+                const hiddenCount = document.querySelectorAll(`.${idAccordion}item.hidden`).length;
+                const desiredClass = collapseCount > hiddenCount ? 'collapse' : 'hidden';
+                
+                document.querySelectorAll(`.${idAccordion}item`).forEach(item => {
+                    if (item === targetItem) return;
+                    if (item.classList.contains(desiredClass)) return;                
+                    item.classList.add(desiredClass);
+                });
+                targetItem.classList.toggle(desiredClass);
+                
+                document.querySelectorAll(`.${idAccordion}button`).forEach(item => {
+                    if (item === btn) return;
+                    item.classList.remove('active');
+                });
+                btn.classList.toggle('active');
+            }
+
+        }
+    }, seconds * 3000);
+}
+
+function stopRotation() {
+    if (rotationInterval) {
+        clearInterval(rotationInterval);
+        rotationInterval = null;
+    }
+}
+
+// Start automatic rotation
+startRotation();
+
+
+document.querySelectorAll(`.${idAccordion}button`).forEach(btn => {
+    btn.addEventListener('mouseenter', stopRotation);
+
+    btn.addEventListener('click', (e) => {
+        const linkedId = btn.getAttribute('data-linkedto');
+        const targetItem = document.getElementById(linkedId);
+        if (targetItem) {
+
+            const collapseCount = document.querySelectorAll(`.${idAccordion}item.collapse`).length;
+            const hiddenCount = document.querySelectorAll(`.${idAccordion}item.hidden`).length;
+            const desiredClass = collapseCount > hiddenCount ? 'collapse' : 'hidden';
+            
+            document.querySelectorAll(`.${idAccordion}item`).forEach(item => {
+                if (item === targetItem) return;
+                if (item.classList.contains(desiredClass)) return;                
+                item.classList.add(desiredClass);
+            });
+            targetItem.classList.toggle(desiredClass);
+            
+
+            document.querySelectorAll(`.${idAccordion}button`).forEach(item => {
+                if (item === btn) return;
+                item.classList.remove('active');
+            });
+            btn.classList.toggle('active');  
+        }       
+    });
+});
+</script>
+
 <Fragment set:html={structuredData} />