Wie kann ich einer nummerierten Folge von IDs eine zusätzliche CSS-Klasse zuweisen?

Im Zuge der SEO-Optimierung meiner mit YooThemePro erstellten Website stellte ich fest, dass die Accordion-Titel nicht als CSS-Überschriften gekennzeichnet sind. Laut Support von YooTheme wäre dies eventuell nur mit einem weiteren kostenpflichtigen PlugIn eines anderen Anbieters realisierbar was wieder 30 Euro kosten soll. Ich finde das nicht lustig, wenn ich schon rund 130 Euro für YooThemePro investiert habe!

Über die Browserkonsole fand ich heraus, dass innerhalb eines Accordions alle Titel mit einer nummerierten ID daher kommen, wie z.B. id="uk-accordion-3". Die Nummerierung ist jedoch nicht fortlaufend. Nun versuche ich, in meiner custom.css folgende CSS-Regel einzubauen:

Immer wenn eine ID mit der Bezeichnung "uk-accordion-*" innerhalb der Klasse "uk-accordion-title" verwendet wird, soll der als Titel folgende Textinhalt mit "h2" ausgezeichnet werden und diese Auszeichnung soll natürlich so im HTML-Source wieder zu finden sein, damit Suchmaschinen dies als h2-Titel identifizieren können. Dieses "h2" müsste auch mit "!important" eingefügt werden, damit es nicht durch andere Definitionen überschrieben wird.

Meine CSS-Kenntnisse reichen leider – auch unter zu Hilfenahme der w3school nicht aus, um diese CSS-Regel korrekt zu erstellen. Es mag aber auch sein, dass das mit bloßem CSS gar nicht realisierbar ist.

Falls es realisierbar ist, bitte ich hier einen CSS-Kenner darum, mir diese CSS-Regel zu erstellen!

Schade! – Ich muss mich wohl damit abfinden. Bei Elementor / WordPress hat man wohl eine Lösung dafür gefunden. Und ich bin nicht der Einzige, der sich so etwas bei UIkit wünscht. Ohne JS und Eingriff in den YooThemeCode ist wohl nix zu machen.

Danke dir für deine Antwort!

Vielen dank für deinen wertvollen Hinweis! ich habe auf mehrere Seiten Accordion verwendet. Bei manchen habe ich wohl den Hinweistext vergessen. Beim Datenschutz ist er drin.

Nach langer Suche im Support-Forum von YooTheme fand ich endlich auch eine Anleitung, wie ich die Icons zum Öffnen und Schließen der Accordion-Items austauschen kann. Und weil ich die Titel des Accordions farblich unterlegt habe, müssen diese sowie der nachfolgende Text links eingerückt werden.

Wer YooThemePro einsetzt, kann hier meine CSS-Ergänzung direkt übernehmen, wenn die nötigen SVG-Icons herunter geladen wurden: (z.B. hier: https://css.gg/icon/)

/* Titel und Text in Accordions links einrücken (nur wichtig, wenn Accordion-Titel eine Hintergrundfarbe bekommt.) */
.uk-accordion-title {
    padding-left: 0.6em;}
.uk-accordion-content .uk-panel {
    padding-left: 1.0em;}

/* Wahl verständlicherer Icons zum Aus- und Einklappen des Accordions */
@internal-accordion-icon-close-image: "/images/svg/zoom-in.svg";
@internal-accordion-icon-open-image: "/images/svg/zoom-out.svg";

Danke für deinen Tipp. Mal sehen, wie ich den konkret verwenden kann.

Ich würde ja gerne zu einem Accordion-Item mittels der ID springen. das geht auch, weil YooTheme jedem Accordion-Titel sowie dem zugehörigen Textbereich eine ID zuweist. Die kann ich aus dem HTML-Source heraus lesen und dann an die URL der Webseite anhängen, auf der das Accordion platziert ist. Leider sind alle Accordion-Items normaler Weise geschlossen. Damit der Benutzer etwas davon hat, genau dieses Item anzuspringen, sollte genau dieses Item aber geöffnet angezeigt werden.

Aktuell sieht der Titel eines Accordion-Item in HTML bei mir so aus:

<a class="el-title uk-accordion-title" href="" id="uk-accordion-15" role="button" aria-controls="uk-accordion-16" aria-expanded="false" aria-disabled="false">Text für den Titel eines Accordion-Item</a>

aria-expanded="false" ist entscheidend dafür, ob das Item ausgeklappt erscheint oder nicht. Es wird vermutlich durch Javascript oder PHP an dieser Stelle eingefügt.

Kann ich unter diesen Voraussetzungen den Link für das Anspringen eines Accordion-Items so gestalten, dass das Accordion-Item in geöffnetem Zustand gezeigt wird? Ich müsste also irgendwie aria-expanded="true" mit dem Link zusammen übergeben können.

Danke liebe Christine! $expandFirst deutet aber darauf hin, dass nur das erste Accordion Item expandiert gezeigt wird. Mir ging es darum, aus anderen Artikeln gezielt auf ein Item im Accordion verlinken zu können und dieses würde dann geöffnet gezeigt.

Erleichtert wird die Sache nur dadurch, dass YooTheme die Accordion Items nummeriert und der zum Titel gehörende Text eine um 1 höhere ID-Nummer erhält. Das Label aria-expand"="false" wird als default gesetzt, weil ich es so im Layout definiert habe. Man kann auch alle Items geöffnet anzeigen lassen, aber blöder Weise z.B. nicht, dass nur das erste geöffnet ist und die anderen nicht usw.

Im von dir zitierten Beispiel von GHSVS wird ein Accordion-Modul dazu verwendet, die Artikel einer Kategorie jeweils einem Accordion-Titel zuzuordnen. Bei Klick auf den Accordion Titel, der dann ja zugleich der Artikel-Titel ist, klappt es aus und zeigt den Text des Artikels an. Das ist sicher eine tolle Funktion, allerdings bei mir schlecht anwendbar, weil es zu einer wahren Flut von Artikeln kommen würde.

Und wie ich die GHSVS-Lösung irgendwie in die Accordion-Lösung von UIkit umwandeln könnte, sehe ich nicht.

Nachtrag:
Immerhin hat die GHSVS-Accordion-Lösung den Vorteil, dass ich mir auch den Wunsch nach h2-Tags (oder anderen) für die Accordion-Title-Items erfüllen kann, damit es sich positiv auf SEO auswirkt.
Dass sich ein Text eines beliebigen Accordion-Item ausklappt, wenn dieses Item über einen Link angesteuert wird, sehe ich allerdings bei der GHSVS-Accordion-Lösung nicht.

Aber ich danke euch für die Anregungen, um diese Aufgabe lösen zu können!