I'm trying to open another page and then open the Accordion and scroll to the section with the ID when the link is clicked. Any help would be greatly appreciated as i'm having no luck at the moment after searching for hours.
I'm guessing there is maybe something I could implement in my current Javascript code that could achieve this? Thanks
Anchor Tag -
<a href="/pagename#test">This is a Test</a>
Accordion -
/** Class representing an accordion component. */
class Accordion {
/**
* Create an accordion component
*
* Accepts a container element which should contain a list of `details` and
* `summary` elements
*
* @param {String} selector The container element.
*/
constructor(selector) {
if (typeof selector !== "string") {
console.error("Accordion selector must be a string");
return;
}
this._container = document.querySelector(selector);
this._container.addEventListener('click', (event) => this._toggle(event));
}
/**
* Static method to close all `details` elements that are descendants of the
* passed in container element.
*
* @param {(HTMLElement|HTMLDocument)} [elem=document] The container
*/
static closeAll(elem = document) {
const opened = elem.querySelectorAll("details[open]");
for (const elem of opened) {
elem.removeAttribute("open");
}
}
/** Private methods */
/**
* Toggle the accordion elements
*
* @param {Event} event The triggering event object
*/
_toggle(event) {
event.preventDefault();
const details = event.target.closest("details");
if (details.hasAttribute("open")) {
details.removeAttribute("open");
} else {
Accordion.closeAll(this._container);
details.toggleAttribute("open");
}
}
}<details>
<summary>
<div class="box box">
<div class="box-study box-study--content">
Accordion Name
</div>
<div class="box-study box-study--image">
<div class="studyicon">
<img src="/iconimage.png">
</div>
</div>
</div>
</summary>
<div class="inside themeGrey">
<h3 id="test">Name of area I want to scroll too</h3>
</div>
</details>