Using details tag with links

JavaScript
1

Hi
I am trying to use the detail tag to hold references to other parts of the web page. These other parts are also contained in detail tags.
The problem is that unless the target is open the link is not followed.

This where the link is referred

            <details>
                <summary class="category">
                    Classes
                </summary>
                <div>
                    <details class="details2">
                        <summary>
                            <a href="#Class-Declaration">Class Declaration</a>
                        </summary>
                        <div class="violations">
                            <a href="#Closing-brace-placement">Closing brace placement</a>
                            <a href="#Opening-brace-placement">Opening brace placement</a>
                            <a href="#Opening-brace-placement">Opening brace placement</a>
                            <a href="#Opening-brace-spacing">Opening brace spacing</a>
                            <a href="#Class-name-case">Class name case</a>
                        </div>
                    </details>
                </div>
            </details>

And this is the target

    <div>
        <details>
            <summary class="body-category">
                Classes
            </summary>
            <sniff-name id="Class-Declaration">&emsp;&ensp;&nbsp; : Class Declaration</sniff-name> <br />
            <violation id="Closing-brace-placement"> : Closing brace placement</violation> <br />
        </details>
    </div>

Any help will be appreciated

2

The fragment link is followed but as the details element is closed you don’t know that it has been followed.

You would need to use JS to monitor if a target was within the details element and then apply the open attribute to the details opening tag.

Unfortunately that is beyond my scope and a question for the JS forum so I will move the post there.:slight_smile:

(Also you can’t make your own tag names up either).

3

There is an open property on those detail elements. When a link is clicked, we need to find that target location and walk up the tree, opening everything that we come across.

So first, finding out if we are dealing with a local link means checking if it starts with a # symbol.

document.addEventListener("click", function (evt) {
    var el = evt.target;
    var href = "";
    if (!el.href) {
      return;
    }
    href = el.getAttribute("href");
    if (href.substr(0,1) === "#") {
      openElement(document.querySelector(href));
    }
});

Then we walk up the DOM until we reach the top:

function openElement(el) {
  while (el.nodeName !== "HTML") {
    el = el.parentNode;
    console.log(el);
  }
}

which when we click on a link gives us:

<details>...</details>
<div>...</div>
<body>...</body>
<html>...</html>

And lastly for each element, we set the open property to true.

  while (el.nodeName !== "HTML") {
    el.open = true;
    el = el.parentNode;
  }

You can see the code working at http://jsfiddle.net/3amv86ex/13/

2 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.