Tabs/Akkordeon: Gestaltung von Tab-Überschriften

Hallo EBKS,

da fallen mir drei Möglichkeiten ein.

Sofern Du auf eine "Animation" (Pfeil zeigt nach oben bei offenem Akkordion bzw. nach unten bei geschlossenem Akkordion) verzichten kannst, kannst Du hinter der Überschrift einfach einen Unicode-Pfeil einfügen. Unter https://symbl.cc/de/collections/arrow-symbols/ findest Du diverse.

Zweite Möglichkeit wäre eigenes CSS. Ich hatte mir da kürzlich selber etwas gebastelt, richtig glücklich war ich damit allerdings nicht. Hier gibt es dann unterschiedliche Pfeile für „offen“ und „geschlossen“. Folgendes einfach unter „Einstellungen > CSS“ eingeben und an Deine Bedürfnisse anpassen:

<style>
.zpTABs .zpNoScroll:after {                                   
content: "🛆";
display: inline-block;
transform: rotate(180deg);
font-size: 1.0rem;
margin-right: 5px;

}

div.zpTABs>ul.zpTABs>li.accordion.active a.zpTABs:after {
content: "🛆";
display: inline-block;
transform: rotate(0deg);
font-size: 1.0rem;
margin-right: 5px;
}
</style>

Schlussendlich lassen sich auf Mario und Phils Seite https://www.widget-zp.de/widgets.html vier entsprechende Widgets finden (Suchbegriff: „Accordion“). Das scheint mir gegenwärtig die beste Lösung.

Ich fände es ebenfalls schön, wenn das hauseigene Widget die Pfeile bereits mitbrächte. Ich meine, das auch schon mehrmals als Wunsch geäußert zu haben, aber da hat sich bislang leider nichts getan.

Viele Grüße

Tom