How to link an onclick action to a separate element in vanilla Javascript

Question

I have a series of anchor links at the top of my page and a series of accordions at the bottom of the page. My goal is when someone clicks the anchor link, it will drop them down to the corresponding accordion and open it automatically. The accordion elements work when you click on them directly, but I want them to also be triggered by the anchor links. *NOTE: I am using WordPress so these elements are generated using a loop. Here's a very simplified version of what I'm working with (obviously without the loop):

var directoryAcc = document.getElementsByClassName("directory-accordion");

for (var i = 0; i < directoryAcc.length; i++) {
  directoryAcc[i].addEventListener("click", function() {
    var panel = this.nextElementSibling;
    if (panel.style.display === "flex") {
      panel.style.display = "none";
    } else {
      panel.style.display = "flex";
      }
  });
}

.container {
  display: flex;
  flex-direction: column;
}
.directory-accordion {
  cursor: pointer;
}
.panel {
  display: none;
}

<div class="container">
  <a href="#" class="link">Link1</a>
  <a href="#" class="link">Link2</a>
  <a href="#" class="link">Link3</a>
</div>
<hr>
<div class="container">
  <span class="directory-accordion">Text1</span>
  <p class="panel">Accordion text1</p>
  <span class="directory-accordion">Text2</span>
  <p class="panel">Accordion text2</p>
  <span class="directory-accordion">Text3</span>
  <p class="panel">Accordion text3</p>
</div>

Any help would be appreciated, thank you!

score 0 · Answer 1 · answered Feb 13 '21 at 01:05

If you meant go section by section, i have a solution:
Use an "id" for spaces of paragraphs, that id is unique and defines your text that can be linked to with a # Example:

<div class="container">
  <a href="#pasta" class="link">Link1</a>
  <a href="#brownie" class="link">Link2</a>
  <a href="#meat3ameatingbagsofcheese" class="link">Link3</a>
</div>
<hr>
<div class="container">
  <span class="directory-accordion" id="pasta">Text1</span>
  <p class="panel">Accordion text1</p>
  <a href="#brownie" class="link">Link2</a>
  <span class="directory-accordion" id="brownie">Text2</span>
  <p class="panel">Accordion text2</p>
  <a href="#meat3ameatingbagsofcheese" class="link">Link3</a>
  <span class="directory-accordion" id="meat3ameatingbagsofcheese">me at 3am eating bags of cheese</span>
  <p class="panel">Accordion text3</p>
</div>
<style>
.container {
  display: flex;
  flex-direction: column;
}
.directory-accordion {
  cursor: pointer;
}
.panel {
  display: none;
}
span {
    margin-top: 600px;
    margin-bottom: 10px;
  }
</style>

traktor · Accepted Answer · 2021-02-14T02:16:01.780

TLDR; HTMLElement.click

Updated 14th Feb 2021 UST

A suggestion for consideration:

supply an id attribute on each of the accordion elements,
Use accordion ids within links to scroll to the accordion when clicked.
Add a new click handler to the link container division (maybe using a nav instead of div container as shown in the post) that checks if a .link element (or descendant element of one) was clicked.
If a clicked link was found in step 3, get the accordion id value from its href attribute and use HTMLElement.click to simulate a click on it.

References:

Example

The following snippet demonstrates the above approach in simple fashion.

The example has no code to prevent toggling accordion expansion when clicking a link.

var directoryAcc = document.getElementsByClassName("directory-accordion");

for (var i = 0; i < directoryAcc.length; i++) {
  directoryAcc[i].addEventListener("click", function() {
    var panel = this.nextElementSibling;
    if (panel.style.display === "flex") {
      panel.style.display = "none";
    } else {
      panel.style.display = "flex";
      }
  });
}

// ****  NEW: set up click listener on container ****

const container = document.querySelector(".container");  // the first one

container.addEventListener("click", function(event) {
  const containerNode = event.currentTarget;
  // allow child elements within link:   
  for( let node = event.target; node != containerNode; node = node.parentNode) {
    if(node.classList.contains("link")) {
      let id =node.getAttribute("href");
      id = id && id[0]==='#' && id.substring(1);
      let expander = document.getElementById(id)
      if( expander) {
        expander.click();
        break;
      }
    }
  }
});

.container {
  display: flex;
  flex-direction: column;
}
.directory-accordion {
  cursor: pointer;
}
.panel {
  display: none;
}

<div class="container">
  <a href="#accordion1" class="link">Link1</a>
  <a href="#accordion2" class="link">Link2</a>
  <a href="#accordion3" class="link">Link3</a>
</div>
<hr>
<div class="container">
  <span class="directory-accordion" id="accordion1">Text1</span>
  <p class="panel" id="accordian1">Accordion text1</p>
  <span class="directory-accordion" id="accordion2">Text2</span>
  <p class="panel">Accordion text2</p>
  <span class="directory-accordion" id="accordion3">Text3</span>
  <p class="panel">Accordion text3</p>
</div>

How to link an onclick action to a separate element in vanilla Javascript

2 Answers2