diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js index 05cc758db..23f01a09c 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js @@ -1,3 +1,4 @@ +import { useEffect } from '@wordpress/element'; import { Icon } from '@wordpress/components'; import { chevronDown, chevronUp } from '@wordpress/icons'; @@ -5,11 +6,33 @@ import { useState } from 'react'; const Accordion = ( { title, - initiallyOpen = false, + initiallyOpen = null, className = '', + id = '', children, } ) => { - const [ isOpen, setIsOpen ] = useState( initiallyOpen ); + const determineInitialState = () => { + if ( id && initiallyOpen === null ) { + return window.location.hash === `#${ id }`; + } + return !! initiallyOpen; + }; + + const [ isOpen, setIsOpen ] = useState( determineInitialState ); + + useEffect( () => { + const handleHashChange = () => { + if ( id && window.location.hash === `#${ id }` ) { + setIsOpen( true ); + } + }; + + window.addEventListener( 'hashchange', handleHashChange ); + + return () => { + window.removeEventListener( 'hashchange', handleHashChange ); + }; + }, [ id ] ); const toggleOpen = ( ev ) => { setIsOpen( ! isOpen ); @@ -26,7 +49,7 @@ const Accordion = ( { } return ( -
+