From b21a8e1fbad9817dff30b05e0cc0494adb0cd27b Mon Sep 17 00:00:00 2001 From: Anurat Eiamphoklarp Date: Fri, 22 Mar 2024 03:40:17 +0700 Subject: [PATCH] #147 fix bug when click pdf link will collapse itself if active --- src/components/Sections.jsx | 5 ++++- src/utils/accordion.js | 23 +++++++++++++---------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/components/Sections.jsx b/src/components/Sections.jsx index e91052b..9f5ea0f 100644 --- a/src/components/Sections.jsx +++ b/src/components/Sections.jsx @@ -21,7 +21,10 @@ export default function Sections({sections}) {
{convertDate(section.date)} / หน้า {section.หน้า}
- + { + evt.stopPropagation(); + accordionToggle(index+1, true); + }} target="_blank" rel="noreferrer"> diff --git a/src/utils/accordion.js b/src/utils/accordion.js index 06f119a..72a813b 100644 --- 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;