I'm trying to scroll to an ID on a different page that is inside a closed accordion. I have tried a few different ways, but I can't seem to figure it out. Any help is greatly appreciated.
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 -
<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>
Javascript for the 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");
}
}
}
On page load you could check if the URL has a hash. Then see if the element exists. If it exists check if it's inside a details field, if so open the accordion and scroll to the element.
See _loadFromHash for implementation details.
/** 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', this._toggle, false);
this._loadFromHash();
}
/**
* 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");
}
}
_loadFromHash() {
// FOR DEMO SINCE THERE IS NO HASH IN STACK OVERFLOW SNIPPET, REMOVE LINE IN REAL APP
window.location.hash = '#test';
// Exit if no hash in url
if(!window.location.hash) return;
// Get element from hash, exit if not found
const element = document.querySelector('#test');
if(!element) return;
// Get parent details from element, exit if not found
const details = element.closest('details');
if(!details) return;
// Open accordion and scoll it into view
details.toggleAttribute("open");
element.scrollIntoView();
}
}
new Accordion('details');<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>