/    Sign up×
Community /Pin to ProfileBookmark

Open an accordion using a url in another page?

I want to use `<details><summary>` to create an accordion. And I want to open a certain accordion from a url in a mail or other page. I have found this code that maybe could work.

https://jsfiddle.net/6jvud52y/

jsFiddle reports some problems with this code. “details used out of scope”

How can I do this code simpler or better?
Can I use a url like this: https://example.com/faq#2 to open the second accordion on a page?

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@sibertauthorOct 06.2021 — > @sibert#1637895 How can I do this code simpler or better?

By accident I found that details do not need a "class=open", but you need to change the "attribute" when open or closing the "details/summary". This makes the code a bit cleaner:

``<i>
</i>function openTarget() {
var id = location.hash.substring(1);
document.getElementById(id).open = true;
}
openTarget();<i>
</i>
`</CODE>
Besides this, you do not need to add a listener if you call from another window:

<C>
window.addEventListener('hashchange', openTarget);`

https://jsfiddle.net/w2p67se4/1/
×

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...