Accordion Pluhign it Bild als Toggler

Hallo,
da wird dir vermutlich nichts anderes übrig bleiben, als dir die entsprechenden Plugins anzusehen, zu installieren und zu testen.

Plugin-Empfehlungen sind grundsätzlich schwierig, weil bei der Auswahl zu viele subjektive Kriterien eine Rolle spielen. Oft werden auch nachträglich zusätzliche Wünsche geäußert, die das gerade vorgeschlagene Plugin nicht erfüllt. Deshalb ist es besser, wenn du verschiedene Plugins testest und selber entscheidest, was am besten zu deinen Vorstellungen passt.

Da es sich bei deiner Frage um kein Anwendungsproblem handelt, habe ich den Status auf „Keine Support-Frage“ geändert.

Viele Grüße
Hans-Gerd

Es heisst natürlich Plugin ohne „h“ …
Danke, ja manchmal hat man Glück und jemand anderes hat eine Lösung parat. Es gibt ja soviele Plugins. Wahrscheinlich werde ich das eh irgendwie anpassen müssen.

Wenn du bei hunderten Forenteilnehmern auf „Schwarmintelligenz“ gehofft hast: hier antworten meistens nur fünf, sechs Teilnehmer/-innen regelmäßig. Der Rest tritt nur mit Fragen in Erscheinung. Schade, aber ist so.

Wenn ich eine Lösung (und ich muss eine finden) finde, dann poste ich sie für die Nachwelt.

Wenn das Akkordeon nur an einer Stelle benötigt wird, würde ich mir mit einem Block für individuelles HTML behelfen und eines der Code-Beispiele übernehmen,z.B. dieses hier:

Wenn du bei
<label class="tab-label" for="chck1">Item 1</label>
das Item 1 mit einem Bild ersetzt (1), sollte das deinen Vorstellungen entsprechen. Das Bild wird als Link angezeigt, bei Klick der (Blind-)Text darunter geöffnet (2). Um die Breite des Bildes festzulegen, habe ich das CSS noch etwas ergänzt (3).

(zum Vergrößern anklicken)

Ein wenig „gestrickt“, aber wie gesagt für ein auf der ganzen Website nur einmal vorkommendes Akkordion eine einfache Lösung. Solltest du mehrere Akkordions benötigen, solltest du einen eigenen Block programmieren, was hier ein wenig den Rahmen sprengt.

Wie du z.B. bei der Seite 20+ Amazing Pure CSS Accordions [Examples 2022] siehst, sind Bild-Akkordeons eher unüblich und werde höchstens dafür eingesetzt, verschiedene Bildstreifen vertikal oder horizontal bei Mauszeigerkontakt zu erweitern (z.B. „20. Picture Sliding CSS Accordion“).

Bleibt dann neben der Usability die Frage, ob die Webseite mit dem Akkordeon dann noch barrierefrei ist.