Estoy tratando de desplazarme a una identificación en una página diferente que está dentro de un acordeón cerrado. He intentado de diferentes maneras, pero parece que no puedo resolverlo. Cualquier ayuda es muy apreciada.
Supongo que tal vez haya algo que podría implementar en mi código Javascript actual que podría lograr esto. Gracias
Etiqueta de ancla -
<a href="/pagename#test">This is a Test</a>acordeón -
<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 para el Acordeón
/** 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"); } } }Al cargar la página, puede verificar si la URL tiene un hash. Luego vea si el elemento existe. Si existe, verifique si está dentro de un campo de detalles, si es así, abra el acordeón y desplácese hasta el elemento.
Consulte _loadFromHash para obtener detalles de implementación.
/** 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>