Imagine a scenario where you have a Home Page with a link to a second page that features some content enclosed by a <details> element. However, the <details> element on the second page is initially closed, and you wish for the link on the home page to redirect to this element and automatically open it.
You want to accomplish this using basic HTML, CSS, and JavaScript. Below is what has been attempted so far:
home.html
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var a = document.getElementById("mylink");
a.onclick = function() {
var b = document.getElementById("mydetails");
b.open = true;
b.style.color = "red"; // testing another property
return false;
}
}
</script>
</head>
<body>
<h1>Home Page</h1>
<h2><a id="mylink" href="second_page.html#mydetails">Go to 2nd page</a></h2>
</body>
</html>
second_page.html
<html>
<body>
<h1>2nd page</h1>
<details id="mydetails" open="false">
<summary>Hello,</summary>
</details>
</body>
</html>
However, despite the code running without errors, clicking on the link in the home page does not open the <details> element on the second page as intended. What steps should be taken to achieve this?
Extra points if one can figure out how to pass the IDs of both the link and target element as parameters to the JS function.
Similar queries:
- How to use a link to call JavaScript?, which was used as a reference source
- Automatically open <details> element on ID call, appears to address the desired outcome, but implementation details still remain unclear