#147 fix bug when click pdf link will collapse itself if active

kaogeek · Mar 21, 2024 · b21a8e1 · b21a8e1
1 parent 2438924
commit b21a8e1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/src/components/Sections.jsx b/src/components/Sections.jsx
@@ -21,7 +21,10 @@ export default function Sections({sections}) {
             <h5 className="text-sm pt-3 text-subheader">{convertDate(section.date)} / หน้า {section.หน้า}</h5>
           </div>
           <div className="flex justify-end items-center gap-2">
-            <a href={section.link} target="_blank" rel="noreferrer">
+            <a href={section.link} onClick={evt => {
+              evt.stopPropagation();
+              accordionToggle(index+1, true);
+            }} target="_blank" rel="noreferrer">
               <svg className="w-[36px] h-[36px] md:w-[48px] md:h-[48px]" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <circle cx="24.7529" cy="24.1987" r="24" fill="#240c00" />
                 <path fill-rule="evenodd" clip-rule="evenodd" fill="white" d="M25.518 15.7832C27.6306 13.6706 31.0559 13.6706 33.1685 15.7832C35.2811 17.8958 35.2811 21.321 33.1685 23.4337L30.8733 25.7288C30.4509 26.1514 29.7658 26.1514 29.3432 25.7288C28.9207 25.3063 28.9207 24.6212 29.3432 24.1987L31.6384 21.9036C32.906 20.636 32.906 18.5809 31.6384 17.3133C30.3708 16.0457 28.3157 16.0457 27.0481 17.3133L24.7529 19.6084C24.3304 20.031 23.6454 20.031 23.2228 19.6084C22.8003 19.1859 22.8003 18.5009 23.2228 18.0783L25.518 15.7832ZM20.9277 28.024C20.5052 27.6015 20.5052 26.9164 20.9277 26.4939L27.0481 20.3735C27.4706 19.951 28.1557 19.951 28.5782 20.3735C29.0007 20.796 29.0007 21.4811 28.5782 21.9036L22.4578 28.024C22.0353 28.4465 21.3502 28.4465 20.9277 28.024ZM16.3374 32.6143C14.2248 30.5017 14.2248 27.0764 16.3374 24.9638L18.6325 22.6686C19.0551 22.2461 19.7401 22.2461 20.1626 22.6686C20.5852 23.0912 20.5852 23.7762 20.1626 24.1987L17.8675 26.4939C16.5999 27.7615 16.5999 29.8166 17.8675 31.0842C19.1351 32.3518 21.1902 32.3518 22.4578 31.0842L24.7529 28.789C25.1754 28.3665 25.8605 28.3665 26.283 28.789C26.7056 29.2116 26.7056 29.8967 26.283 30.3191L23.9879 32.6143C21.8752 34.7269 18.45 34.7269 16.3374 32.6143Z" />

diff --git a/src/utils/accordion.js b/src/utils/accordion.js
@@ -1,21 +1,24 @@
-export default function accordionToggle(id) {
+export default function accordionToggle(id, forceOpen=false) {
 
   const navActive = document.querySelector('.nav-active');
-  const accordionExpand = document.getElementById('accordion-'+id);
+  const accordionClick = document.getElementById('accordion-'+id);
   const accordionActive = document.querySelector('.accordion-active');
   const accordionActiveID = accordionActive?.dataset.accordionId;
+
+  if (!forceOpen || accordionActiveID != id) {
+    accordionActive?.classList.remove('accordion-active');
+    accordionActive?.classList.add('accordion-collapsed');
+  }
 
-  accordionActive?.classList.remove('accordion-active');
-  accordionActive?.classList.add('accordion-collapsed');
   if (accordionActiveID != id) {
-    accordionExpand.classList.remove('accordion-collapsed');
-    accordionExpand.classList.add('accordion-active');
-    accordionExpand.scrollIntoView({ behavior: 'smooth' });
+    accordionClick.classList.remove('accordion-collapsed');
+    accordionClick.classList.add('accordion-active');
+    accordionClick.scrollIntoView({ behavior: 'smooth' });
   }
-  
-  const navExpand = document.getElementById('nav-'+id);
+
+  const navExpanded = document.getElementById('nav-'+id);
   navActive.className = 'nav py-2 px-5 font-bold text-left w-full md:w-64 text-[#9F9F9F]';
-  navExpand.className = 'nav nav-active py-2 px-5 font-bold text-left w-full md:w-64 bg-white rounded-lg text-[#131313]';
+  navExpanded.className = 'nav nav-active py-2 px-5 font-bold text-left w-full md:w-64 bg-white rounded-lg text-[#131313]';
 
   return;