How do I link to a section in a panel / accordion?

[benkoshy]

Context:

We've got an FAQ section, which is quite large: https://ddnexus.github.io/pagy-pre/guides/how-to/

Someone asked a question and I want to link this particular answer to them - such that that particular panel scrolls into view and is automatically opened.

Any ideas on whether / how this can be done or otherwise managed.?

[DannyBen]

If you right click any of the panel titles, and select Inspect Element, you will see that all of them have IDs, which are the lowercase, hyphen-case of the title.

So you can link to them in the same way you link to H2 and H3 captions.
https://ddnexus.github.io/pagy-pre/guides/how-to/#paginate-activerecord-collections

(and the panel opens like you expected it would).

[benkoshy]

That does work as suggested - thank you for your answer.

However, it is a little cumbersome for casual readers to view the page source. in order to copy a link.

A nifty feature to allow copying of links (with the IDs) to the relevant panel would be welcomed. I will leave it to you to assess whether the pros vs cons are worth it and an associated implementation.

[DannyBen]

Well - normally, these IDs are attached to captions (H2, H3, ...), and clicking them changes the URL to include this specific link.
In panels, the click action is used for opening and closing the panel - but perhaps they can serve a dual purpose, and also add the hash to the URL.

[DannyBen]

Oh - another thing I noticed - is that you can avoid the "inspect" route. Simply right-click the panel caption and select "Copy Link" - this should have the direct link to the panel now.

[benkoshy]

Well - normally, these IDs are attached to captions (H2, H3, ...), and clicking them changes the URL to include this specific link.

@DannyBen you are absolutely correct in that when you click the panel, you are able to "copy link". I did not know that. The "affordance" is not readily transparent (at least to me) and I consider myself relatively fluent with retype LOL. I was using the "caret" to open / close the panel and not the H1, H2 headings, so I never realised a link was there in the first place!

Well - normally, these IDs are attached to captions (H2, H3, ...), and clicking them changes the URL to include this specific link.
In panels, the click action is used for opening and closing the panel - but perhaps they can serve a dual purpose, and also add the hash to the URL.

• That may suffice in lieu of a "copy link" button.

(Consider these as but an instance of a user, throwing up some ideas / user feedback)