Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

167
Views
I'm trying to open my Accordion at scroll to an ID when the anchor link is clicked on another page

I'm trying to scroll to an ID on a different page and open the accordion that contains the ID. 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");
    }
  }
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!