w3c / w3c/csswg-drafts

Anchors opening <details>

Open
#3,330 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

unknown/future spec
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

Might be linking the wrong spec but I think it is this: https://www.w3.org/TR/html51/interactive-elements.html#the-details-element

I have noticed that if an anchor is placed within a closed <details> element and a user clicks on a link to that anchor, nothing happens. This might not be the intended use of the details element, but if this was a valid use case it would be good that when the user navigates to an anchor within a details element, that details element is opened.

Another potential case would be if the id to anchor to was on the details element itself and the user navigated to it then this would open the details element too (although being able to style details to be open as discussed in #2084 would potentially solve this).

An example use case for this functionality would be a feedback link in a header at the top of the page that anchors to a details element in the footer containing the feedback form, or another would be a link referencing an answer within a FAQ section using <details> and <summary> elements for the questions and answers.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the linked HTML 5.1 details-element specification and compare the two described cases: an anchor inside a closed details element and an anchor on the details element itself. Done means determining whether navigation should open the element and documenting or pursuing the specification change needed for that behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.