Navigate to a specific DIV element after clicking a link from a different page and display the FAQ dropdown

Question

Navigate to a specific DIV element after clicking a link from a different page and display the FAQ dropdown

I have searched through other inquiries on this platform, but none seem to address what I am specifically looking for. I am willing to utilize scripting languages like JavaScript or jQuery if necessary.

Query: I have a webpage containing a link that directs users to an FAQ page. When this link is clicked, I desire the user to be taken to the new page and automatically scrolled down to a designated element (one of the drop-down questions) while also triggering it to open as if clicked manually. Is such functionality achievable?

The link on the initial page appears as follows:

<a tabindex="0" href="https://somethinghere.com#q5-section" target="_blank" rel="noopener">.......</a>

I have already included the anchor tag at the end, however, it does not appear to be functioning correctly. (Should the link opening in a new tab versus the same window make a difference? It currently opens a new tab.)

The ID of the specific drop-down that should open on the new page when clicking that link is #q5-section

This is the HTML code encompassing the entire FAQ drop-down:

<div class="faq-question" id="q5-section">
  <input id="q5" type="checkbox" class="panel">
  <div class="plus">+</div>
  <label for="q5" class="panel-title">................</label>
  <div class="panel-content">
    <span>
      ....................»
      <ul>
        <li>.........................</li>
        <li>..........................</li>
      </ul>
      <br><br>
      .......................»

      <ul>
        <li>...................</li>
      </ul>
    </span>
  </div>
</div>

If any additional information is required to achieve this task, please inform me accordingly.

javascript html jquery css

Answer 1

Answer №1

When including links with anchors (https://...#element_id), the browser will automatically scroll down to that specific element upon loading the link.

However, it appears from your inquiry that you also desire to simulate a click event (presumably to expand a section or toggle an accordion). While this cannot be achieved solely through the link itself, it can be easily done using some simple JavaScript:

document.addEventListener("DOMContentLoaded", function() {
  // Retrieve the hash value from the URL (which includes the '#' character)
  const targetElementId = window.location.hash;
  
  // If there is a valid hash value, excluding just '#'
  if (targetElementId && targetElementId.length > 1) {
    // Locate the target element based on the ID provided in the hash (without the '#' character)
    const elementToTrigger = document.querySelector(targetElementId);
    
    // If the element exists, trigger a click event on it
    if (elementToTrigger) {
      elementToTrigger.click();
    } else {
      console.warn("No element was found with the ID:", targetElementId);
    }
  }
});

Answer 2

When including links with anchors (https://...#element_id), the browser will automatically scroll down to that specific element upon loading the link.

However, it appears from your inquiry that you also desire to simulate a click event (presumably to expand a section or toggle an accordion). While this cannot be achieved solely through the link itself, it can be easily done using some simple JavaScript:

document.addEventListener("DOMContentLoaded", function() {
  // Retrieve the hash value from the URL (which includes the '#' character)
  const targetElementId = window.location.hash;
  
  // If there is a valid hash value, excluding just '#'
  if (targetElementId && targetElementId.length > 1) {
    // Locate the target element based on the ID provided in the hash (without the '#' character)
    const elementToTrigger = document.querySelector(targetElementId);
    
    // If the element exists, trigger a click event on it
    if (elementToTrigger) {
      elementToTrigger.click();
    } else {
      console.warn("No element was found with the ID:", targetElementId);
    }
  }
});

Navigate to a specific DIV element after clicking a link from a different page and display the FAQ dropdown

Answer №1

Similar questions

Setting up additional requirements in a subfolder within play.js

Dynamically remove values from other fields in a React Formik form based on checkbox conditions

Which is the best choice for a large-scale production app: caret, tilde, or a fixed package.json

What is the best way to retrieve the contents of the first and second lines from a textarea input field?

Can you tell me the method of checking the number of members in a voice channel?

Concealing the path of a file input in CSS

Having trouble establishing a connection from regular JavaScript to a socket.io backend? Face the issue of connection closure before

Tips on finding the right parent object by utilizing the information stored in the nested array

When the Popover appears in ShadCN, the input field unexpectedly takes focus

Tips on how to store the values of dynamically generated textboxes into a variable

Is it safe to transmit a password in plain text from a Jquery ajax callback to Java?

supplying various color variables to a single class

Utilizing Ajax XMLhttprequest to Send POST Request to PHP Script and Dynamically Rotate an

Changing Location of Carousel in Bootstrap

The keyboard automatically disappeared upon clicking the select2 input

Discovering if an ID already exists in a Firebase real-time database with React.js

retrieve data for chart from an AJAX request

Retrieving specific object properties within an Angular 2 and Ionic 2 form

Expand the width of the div element to fill the entire space once the div is concealed

Initiate node.js execution upon system boot