mildlydiverting

Just an update to say - a friend with JS chops wrote me a tiny JS script to achieve this. Popping it here in case it's useful to anyone. It's well commented, and targets the button-block ID. Console logging currently on. Seems to work, but not extensively tested across browser. <script> // This will click the button if it's not already open const openButton = (id) => { console.log('>>>>>>>>>> ', id) // Try and grab the button by its ID const button = document.getElementById(id) console.log(button) // If the button doesn't exist, do nothing if (!button) return; // Click the button if 'aria-expanded' is 'false' if (button.getAttribute('aria-expanded') === 'false') { button.click(); // Scroll the button into view button.scrollIntoView({ behavior: 'smooth', block: 'start' }); // Now we want to update the URL to add # and the button ID to the end of the current URL (replacing any existing hash) // So people can still link directly to the accordion // Update the URL with the button ID const newUrl = window.location.href.split('#')[0] + '#' + id; history.pushState(null, '', newUrl); } } // Once the document is loaded, we want to add an event listener to all links that have an href that contains '#button-block-' // This will grab all the links that link to accordions, and ignore the ones that don't document.addEventListener('DOMContentLoaded', function () { // Grab all the links that link to accordions const links = document.querySelectorAll('a[href*="#button-block-"]'); // Add an event listener to each link links.forEach(link => { link.addEventListener('click', function (event) { // Stop the link from doing its default action event.preventDefault(); // Get the button ID from the link const buttonId = link.getAttribute('href').split('#')[1]; // Open the button openButton(buttonId); }); }); // Finally, if there's a hash in the URL, open the button if it isn't already open const hash = window.location.hash; if (hash) { setTimeout(() => { openButton(hash.split('#')[1]); }, 666); } }); </script>

Hey - @PoochKingdom this is so useful, thank you. Would you be willing to help me figure out what I'm doing wrong implementing it? On this page https://www.careful.industries/test-braid-accordions I have 4 x accordions, each with 5 items. I would like to create links which when clicked, scroll to the relevant accordion heading/button/content dropdown, and open that accordion content dropdown. I'm OK if they stay open once the link is clicked, but if another is clicked, I'd like the page to jump to the new location and open the accordion content. (So, many accordion content items open at once is OK). I have a floating menu set up, where I've found the #button-block-e4217f562264d4a2c827-0 to -4 IDs for the first accordion on the page. I have plugged in the jQuery code above in to the footer. I've got the # links jumping to the relevant accordion <li> item anchor by id. (nb not all accordions are currently linked up), but not opening the related accordion content. You can see at the side where I've found selector path IDs for the various elements of the first accordion block, and none of those work to open the accordion content, either. For reference: Streets Accordion: content block #yui_3_17_2_1_1725290636637_551 ul #yui_3_17_2_1_1725290636637_550 li #yui_3_17_2_1_1725290636637_549 h3 #yui_3_17_2_1_1725290636637_548 button #button-block-e4217f562264d4a2c827-0 et seq title span #yui_3_17_2_1_1725290636637_547 content dropdown #dropdown-block-e4217f562264d4a2c827-0 et seq What am I doing wrong? Sadly my js is very limited, this is right at the ends of my ability to fix, and I can't work out how to use dev tools in my browser to debug. I kind of understand some of the words in @Beyondspace's reply, but definitely couldn't write js based on it, sorry. Your help would be most appreciated.