I am trying to open an accordion from an anchor tag in the same window. But I have to click twice to get it to work. Any clue how to open an accordion (details) with only ONE click?
@SempervivumNov 02.2021 — #What's happening is as follows:
After loading the page there is no hash present in the URL. Thus at first click the element to be opened cannot be determined and it doesn't open. However one default action of clicking a link that contains a hash is, that it's added to the URL.
Therefore at second click the hash is there and subsequently the element can be determined and opened.
@sibertauthorNov 02.2021 — #> @Sempervivum#1638964 Therefore at second click the hash is there and subsequently the element can be determined and opened.
Yes, I figured out that that this happen. But how do I open an accordion in the same page? Any tip?
@SempervivumNov 02.2021 — #Read the hash from the link having been clicked instead of the URL: ``<i> </i> function openacc(ele) { // var hash = location.hash.substring(1); const dest = ele.getAttribute('href').substring(1); document.getElementById(dest).open = true; }<i> </i>`</CODE> When doing so you have to hand over the element to the function: <CODE>`<i> </i> <div> <a href="#1" onclick="openacc(this)">#foo</a> <a href="#2" onclick="openacc(this)">#bar</a> </div><i>
@sibertauthorNov 02.2021 — #Yes. This works in jsfiddle, but in real website it does not open the accordion. I had to "open" the window again:
``<i> </i>function openacc(ele) { const dest = ele.getAttribute('href').substring(1); document.getElementById(dest).open = true; window.open(ele); }<i> </i>`` But this is causing a "flicker" that is annoying.
@SempervivumNov 02.2021 — #Hm, in my testfile on Opera and XAMPP it's working fine.
I propose to do some debugging: ``<i> </i>function openacc(ele) { console.log(ele.getAttribute('href')); const dest = ele.getAttribute('href').substring(1); document.getElementById(dest).open = true; // window.open(ele); }<i> </i>`</CODE> My first attempt was this:<br/> <C>const dest = ele.href.substring(1);`
and it was not working as the browser extended the href attribute to a full URL including protocol and domain.
@sibertauthorNov 02.2021 — #I finally found the issue why it is not working in real life. I have placed an anchor INSIDE one of the <details>. An anchor outside the details, work as expected. Strange is that the "open" status is set on the accordion, but disappear immediately.
Is there any way to get it to work both inside and outside the accordion?