Wie Link, Anker auf Akkordion setzen.

[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