Wie Link, Anker auf Akkordion setzen.

[sonne]

Hallo zusammen, ich nutze den Akkordion Code so wie er auf w3schools w3schools steht.

 <button class="accordion">Section 1</button>
<div class="panel">
  <p>Dieser Text sollte verlinkt werden </p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div> 

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
} 

Jetzt wollte ich eine Bild auf der gleichen Seite so verlinken dass wenn ich das Bild anklicke der Text im entsprechenden Akkordion im Focus steht. Ich dachte mit das ich das mit ID realisieren könnte:

<p id="test">Dieser Text sollte verlinkt werden</p>

<a href=#test><img src="img/test.jpg" alt="Logo"></a>

aber das funktioniert so leider nicht. Wie könnte ich das umsetzen? Ich könnte, würde auch statt dem Accordion mit JavaScript auf <details> und <summary> nutzen, wenn es zum Ziel führt.

[Matthias Scharwies]

Servus!

Hallo zusammen, ich nutze den Akkordion Code so wie er auf w3schools w3schools steht.

Ich könnte, würde auch statt dem Accordion mit JavaScript auf <details> und <summary> nutzen,

Ja! w3schools ist nicht mehr so schlimm wie früher, dieses Beispiel ist allerdings überholt.

Nutze -wenn möglich - immer native HTML-Elemente!

• Infobox/Akkordeon mit details

Jetzt wollte ich eine Bild auf der gleichen Seite so verlinken dass wenn ich das Bild anklicke der Text im entsprechenden Akkordion im Focus steht.

Das finde ich problematisch. Was ist, wenn das details-Element zugeklappt ist? Dann führt der Link nicht zum (gewünschten) Ziel.

Also solltest du hier neu formulieren:

Ziel: Wenn ich einen Link klicke, sollte das details-Element angesprungen und geöffnet werden.

Deshalb sollte zumindest die id im details-Element selbst oder besser im summary-Element stehen. Dann kann es der Nutzer selbst öffnen, wenn er will.

Ich persönlich würde das so - ohne JavaScript - realisieren.

Ich dachte mit das ich das mit ID realisieren könnte:

<p id="test">>Dieser Text sollte verlinkt werden</p>

 <a href=#test><img src="img/test.jpg" alt="Logo"></a>

aber das funktioniert so leider nicht.

Du könntest mit CSS den Focus sichtbar machen:

summary:focus {
    background: skyblue;
}

Du könntest mit JavaScript überprüfen, ob eines deiner summary-Elemente den Focus hat und dann dem übergeordneten details-Element das open-Attribut mitgeben.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

wenn ich das Bild anklicke der Text im entsprechenden Akkordion im Focus steht.

Das müsste man vom use case her nochmal betrachten. Geht es wirklich nur um eine Verlinkung auf der gleichen Seite? In den Fall würde ich schon das click Event abfangen und dann per Script das Accordiontab aktivieren. Der Fokus muss aufs summary, ja, weil dies das interaktive Element ist.

Falls man ein Tab von außen verlinken will, muss man schauen, ob das focus Event im Partnern Moment kommt, das würde ich nicht ohne Test empfehlen.]

Einen focus Eventhandler auf die summary Elemente zu legen kann gut oder unerwünscht sein. Ist es gewollt, dass beim Durchtabben der Seite die Accordiontabs aufklappen, wenn man ihr summary Element erreicht? Wenn ja, braucht man den click Handler wohl nicht.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ist es gewollt, dass beim Durchtabben der Seite die Accordiontabs aufklappen, wenn man ihr summary Element erreicht?

Nein. Auf. Gar. Keinen. Fall.

Kwakoni Yiquan

[Der Martin]

Hallo Rolf,

hast du irgendwas Komisches geraucht, oder steh ich aufm Schlauch?

[...] ob das focus Event im Partnern Moment kommt, [...]

Ich nix verstehn diese halbe Satz. 🤷

Einen schönen Tag noch
 Martin

[MudGuard]

Hi,

hast du irgendwas Komisches geraucht, oder steh ich aufm Schlauch?

Vermutlich Autokorrektur nicht abgeschaltet.

[...] ob das focus Event im Partnern Moment kommt, [...]

Ich nix verstehn diese halbe Satz. 🤷

s/Partnern/passenden/

cu,
Andreas a/k/a MudGuard

[sonne]

@Matthias Scharwies
Grundsätzlich stimme ich dir zu, wenn man ohne JavaScript zur Lösung kommt, um so besser.

Ziel: Wenn ich einen Link klicke, sollte das details-Element angesprungen und geöffnet werden.

Genau, das wollte ich gesagt haben. Konkret: Es gibt das besagte Accordion und auf der gleichen Seite passende Bilder zu den Thema im Accordion. Wenn man jetzt auf das Bild klickt, sollte am den entsprechenden Inhalt im Accordion (geöffnet) lesen können.

Ich werde dein Vorschlag heute Abend versuchen umzusetzen.
Umstellen auf <details> und <summary>
Wie ich allerdings den "klick" auf dem Bild abfragen kann um details[open] umzusetzen habe ich noch nicht verstanden.
Danke und Grüße

[Gunnar Bittersmann]

@@sonne

Wie ich allerdings den "klick" auf dem Bild abfragen kann

Brauchst du nicht. Einfach aufs hashchange-Event lauschen.

um details[open] umzusetzen habe ich noch nicht verstanden.

open ist eine Eigenschaft von HTMLDetailsElement.

☞ Ein Einzeiler.

Kwakoni Yiquan

[sonne]

@Gunnar Bittersmann

Danke, aber zu hashchange-Event muss ich mich erst einlesen. Das sagt mir nichts.

@all

ich habe es erst einmal so gelöst.

<details id="details">
<summary id="summary">Klicke hier, um mehr zu sehen</summary>
<p>Dies ist der sichtbare Text, wenn das Detail-Element geöffnet ist.</p>
</details>


 <a href="#details" onclick="document.getElementById('details').open = true;"><img src="img/testbild.jpg" alt="ein Bild"></a>

Für Kritik und Anmerkungen bin ich offen.

Grüße

[Matthias Scharwies]

Servus!

 <a href="#details" onclick="document.getElementById('details').open = true;"><img src="img/testbild.jpg" alt="ein Bild"></a>

Für Kritik und Anmerkungen bin ich offen.

DRY

Du hast den JS-Code in jedem Link, falls du mehrere solche Links setzt.

Gunnars Code prüft, ob sich der URL der Seite ändert (#id ist der hash, bei dessen Änderung der hashchange-Event feuert.) und zwar nur einmal.

HTML/Tutorials/Trennung_von_Inhalt,_Präsentation_und_Verhalten

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

 <a href="#details" onclick="document.getElementById('details').open = true;"><img src="img/testbild.jpg" alt="ein Bild"></a>

Für Kritik und Anmerkungen bin ich offen.

DRY

Du hast den JS-Code in jedem Link, falls du mehrere solche Links setzt.

Ja, das auch. Das ist aber noch mehr WET (das Gegenteil von DRY: write everything twice), denn die Referenz auf das Element mit der ID "details" ist doppelt vorhanden.

Das ließe sich vermeiden mit <a href="#details" onclick="document.querySelector(this.getAttribute('href')).open = true">. Aber das sollte man nicht tun, schon gar nicht bei jedem Link (schlechtes Beispiel).

Man sollte aber keine on…-Attribute verwenden. Eventhandler gehören ins JavaScript, nicht ins Markup.

Eigentlich gehört [onclick] { outline: thick solid red } in jedes Stylesheet.

Kwakoni Yiquan

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

@nix hatte letztes Jahr bereits mehrfach davon gesprochen, in (potentiell) geschlossene details-Elemente hinein zu verlinken.

Ich würde das gerne im Wiki erwähnen, dabei aber davor warnen, dass man den Seiteninhalt eben nicht durch „viele“ details-Elemente gliedert und die summary-Elemente als Überschriften missbraucht.

Dazu meine Frage:

Verlinkung auf summary zeigen. Das sollte wohl ok sein.

angesprungene details-Elemente mit JavaScript öffnen - das wäre mir bereits zu viel drumherum. Das sollte der Nutzer entscheiden. Wie steht ihr dazu?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Standardantwort: kommt drauf an.

In ein normales details hineinzulinken käme mir falsch vor. Wenn ich aber eine details-Gruppe verwende, um ein Akkordeon-Widget zu erstellen, fände ich es richtig, diese Akkordeonseite zu öffnen (weil es mMn eine Eigenschaft von Akkordeons ist, dass immer eine Seite sichtbar ist).

Rolf

[Gunnar Bittersmann]

@@Matthias Scharwies

Dazu meine Frage:

Verlinkung auf summary zeigen. Das sollte wohl ok sein.

Nö, warum nicht aufs details-Element?

Die Referenz darauf braucht man ja zum Aufklappen.

Kwakoni Yiquan

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Dazu meine Frage:

Verlinkung auf summary zeigen. Das sollte wohl ok sein.

Nö, warum nicht aufs details-Element?

Die Referenz darauf braucht man ja zum Aufklappen.

Das ist doch genau meine Frage: Sollen wir das automatische Aufklappen empfehlen oder soll das bewusst dem Nutzer überlassen werden?

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Gunnar Bittersmann

☞ Ein Einzeiler.

Ich hab da mal noch einen Link eingefügt, der zu keinem Element führt, weil es keins mit dieser ID gibt.

JavaScript-Fehler will man nicht haben, deshalb gibt’s jetzt die Abfrage, ob es ein Element mit der ID = location.hash gibt. Und wenn ja, bei der Gelegenheit auch gleich, ob es ein details-Element ist.

Kwakoni Yiquan