Dann und wann ist es notwendig, große Mengen an Text sinnvoll auf der eigenen Website zu platzieren. Viele Themes bieten dafür praktische Akkordeon- und Tab-Elemente an, die Texte so lange verbergen, bis sie per Klick sichtbar geschaltet werden. Doch nicht jedes Theme bietet diese Möglichkeit. In diesem Beitrag stellen wir Ihnen einen einfaches CSS-Code-Beispiel vor, mit dem Sie die Lücke ohne Plug-in schließen können.

Worum geht es?

Es ist ein weit verbreitetes Problem unter vielen Website-Betreibern: Im Internet muss man sich gut vermarkten. Man möchte seinen Besuchern am liebsten jedes kleinste Detail und jeden noch so wichtigen Vorteil seines Services auflisten. Leider sind die wenigsten Kunden wirklich an so etwas interessiert. Mehr noch, große Mengen an Text schrecken Besucher oft ab, da diese es als zu „umständlich“ empfinden, den Text auf seine wichtigsten Punkte durchzuarbeiten.
Hierfür bieten viele Themes in Ihren Page-Buildern die sogenannten Akkordeon- oder Tab-Elemente an. In Ihnen wird lediglich ein kleiner Textausschnitt gezeigt, der ein Thema anreißt. Ist dieses Thema für den Kunden interessant, kann er den Tab anklicken und der Rest des Textes wird sichtbar. Das spart nicht nur Platz, es gliedert die Texte auch nach  sinnvollen Themen.

Ein Beispiel: So sieht ein Akkordeon aus

Was ist die Herausforderung?

Nun bietet aber nicht jedes Theme einen Page-Builder mit solchen Funktionen an. Das bedeutet jedoch nicht, dass Sie komplett auf diese Funktion verzichten müssen. Wir möchten Ihnen heute eine sehr ähnliche HTML/CSS Lösung zeigen, die Sie ohne große Schwierigkeiten und in jedem Theme nachbauen können. In unserem Beispiel verwenden wir das Theme „Twenty Seventeen„.

Unsere Lösung

Wie Sie in dem Folgenden Bild sehen können, wird in unserer Lösung ein Button mit dem Titel „Zusätzliche Infos“ erstellt.

Der Button: Bisher ist nur ein Button zu sehen

Klickt man auf diesen Button, öffnet sich unter Ihm ein neuer Bereich mit der Überschrift „Gut zu wissen„, darunter findet sich etwas Text. Aber auch die Schrift in dem Button ändert sich, hier steht nun „Weniger Infos„.

Nach dem Klick: Unter dem Button ist neuer Text erschienen

Bei Bedarf soll der Besucher den Text durch einen erneuten Klick auf den Button wieder ausblenden können.

Den Aufbau des Akkordeons über HTML erstellen

Zunächst müssen Sie den folgenden Code in den Text-Editor der gewünschten Seite einfügen, auf der der versteckte Text erscheinen soll.
Der Code besteht unter anderem aus einem Bereich (div id=“akkordeon“), in dem sich der ganze Zauber abspielen soll. Dazu werden zwei Button erstellt, einer mit der Aufschrift „Zusätzliche Infos“ (a class=“show“ href=“#akkordeon“) und einer mit der Aufschrift „Weniger Infos“ (a class=“hide“ href=“#“). Nach den Button fügen Sie einen weiteren Bereich ein, in welchen Sie den Text einfügen, der bis zum Klick versteckt sein soll (div class=“inhalt“).
Im Ganzen Sieht der Code folgendermaßen aus:
<div id="akkordeon">
<a class="show" href="#akkordeon">Zusätzliche Infos</a><a class="hide" href="#">Weniger Infos</a>
<div class="inhalt">
<h3>Gut zu Wissen</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
</div>
</div>
Wichtig: Fügen Sie den Text nur im Text-Editor ein, im Visuellen Editor eingefügt, wird er nicht funktionieren. Auch bearbeiten können Sie ihn nur im Text-Editor.

Im Text-Editor: Der Code wurde in die Seite eingefügt

Wir haben nun einmal farbig markiert, was Sie am Code nach Ihren Wünschen anpassen können, ohne dabei die Funktion des Akkordeons einzuschränken. Es lassen sich zum einen die Beschriftungen der Button und zum anderen der versteckte Text anpassen.
<div id="akkordeon">
<a class="show" href="#akkordeon">Zusätzliche Infos</a><a class="hide" href="#">Weniger Infos</a>
<div class="inhalt">
<h3>Gut zu Wissen</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
</div>
</div>
Wenn Sie Anpassungen vorgenommen und Ihren persönlichen, versteckten Text eingefügt haben, speichern Sie die Seite ab. Danach können Sie im Frontend das bisher noch ziemlich unbefriedigende Ergebnis begutachten. Aber keine Sorge, mit ein wenig CSS sorgen wir schnell dafür, dass das Akkordeon sowohl funktioniert, als auch besser aussieht.

Im Ansatz erkennbar: Noch sieht alles unordentlich aus

Die Funktion des Akkordeons über CSS erstellen

Was Sie als nächstes benötigen ist ein CSS-Editor. Seit WordPress 4.7 besitzt der Customizer einen eigenen Bereich für Ihren CSS-Code. Diesen können Sie für die folgenden Schritte nutzen. Sie finden Ihn, indem Sie über die Admin-Leiste am oberen Bildschirmrand auf „Customizer“ klicken. In dem folgenden Menü wählen Sie den Menüpunkt „Zusätzliches CSS“ aus. Hier fügen Sie nun all den Code ein, den wir Ihnen im nächsten Schritt zur Verfügung stellen.

Der Customizer: Über die Admin-Leiste gelangen Sie zum Customizer

Nun gehen wir einmal Schritt für Schritt durch, was alles an dem Akkordeon angepasst werden muss. Unter jedem unserer Schritte finden Sie den passenden Code-Schnipsel, sowie eine Erklärung, was genau dieser bewirkt.

Schritt 1: Den auszublendenden Text ausblenden

#akkordeon:not(:target) .inhalt {display: none;}
Da der Text von Anfang an nicht zu sehen sein soll, müssen wir ihn über seine Klasse (.inhalt) ausblenden (display: none;). Allerdings soll er nur dann ausgeblendet sein, wenn der Link „Zusätzliche Infos“ nicht geklickt wurde ( #akkordeon:not(:target) ).

Schritt 2: Beim Klicken auf „Zusätzliche Infos“ erscheint Text

#akkordeon:target .inhalt {display: block;}
Klickt man auf „Zusätzliche Infos“ (#akkordeon:target), soll der Text über seine Klasse (.inhalt) eingeblendet werden (display: block;).

Schritt 3: Beim Klicken auf „Weniger Infos“ verschwindet Text

Der Code in Schritt 1 regelt diesen Vorgang bereits. Klickt man auf „Weniger Infos“, gilt der Link „Zusätzliche Infos“ als nicht mehr aktiv und der Text verschwindet automatisch wieder.

Schritt 4: Beim Klicken auf „Zusätzliche Infos“ ist nur noch „Weniger Infos“ zu sehen

#akkordeon:target .show {display: none;}
Mit diesem Code erreichen wir, dass bei dem Klick auf den Link „Zusätzliche Infos“ (#akkordeon:target) dieser Link über seine Klasse (.show) ausgeblendet wird (display: none;). Somit ist nur noch die Option „Weniger Infos“ zu sehen.

Schritt 5: Beim Klicken auf „Weniger Infos“ ist nur noch „Zusätzliche Infos“ zu sehen

#akkordeon:not(:target) .hide {display: none;}
Wie beim Code in Schritt 4 erklärt erreichen wir hier umgekehrt, dass bei dem Klick auf den Link „Weniger Infos“ (#akkordeon:not(:target)) dieser Link über seine Klasse (.hide) ausgeblendet wird (display: none;). Somit ist nur noch die Option „Zusätzliche Infos“ zu sehen.

Schritt 6: Den Text stilistisch abheben

.inhalt {
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
padding: 20px 20px 1px;
margin: 0px 0px 10px;
}
Damit wir erkennen, dass es sich um den erscheinenden Text (.inhalt) handelt, geben wir ihm über diesen Code einen Schatten (box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);) sowie einen Innenabstand (padding: 20px 20px 1px;). Auch ein kleiner Abstand nach unten (margin: 0px 0px 10px;) darf nicht fehlen.

Schritt 7: Aus den Links sollen Button werden

.show,
.hide {
padding:10px;
background: rgb(254, 164, 0);
box-shadow:none!important;
color:#fff;
font-weight:bold;
}
.show:hover,
.hide:hover {
background: rgb(255, 214, 118);
color:#fff!important;
transition:0.2s all ease-in-out!important;
}
Die Links „Zusätzliche Infos“ und „Weniger Infos“ sehen momentan noch wie einfache Links aus. Dieser Code lässt sie in dem Theme Twenty Seventeen wie Button aussehen. Außerdem erhalten die Button beim Überfliegen mit der Maus eine leicht hellere Hintergrundfarbe.

Der ganze CSS-Code zusammengefasst

Hier finden Sie den gesamten Code noch einmal in komprimierter Form.
#akkordeon:not(:target) .inhalt,
#akkordeon:not(:target) .hide,
#akkordeon:target .show {display: none;}
#akkordeon:target .inhalt {display: block;}
.inhalt {
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
padding: 20px 20px 1px;
margin: 0px 0px 10px;
}
.show,
.hide {
padding:10px;
background: rgb(254, 164, 0);
box-shadow:none!important;
color:#fff;
font-weight:bold;
}
.show:hover,
.hide:hover {
background: rgb(255, 214, 118);
color:#fff!important;
transition:0.2s all ease-in-out!important;
}
Sie können Ihn einfach kopieren und in Ihr „Zusätzliches CSS“ einfügen. Danach sieht das Akkordeon aus wie gewünscht.

Zusätzliches CSS: Vergessen Sie nicht, den Code abzuspeichern

Fazit

Mit einfachem HTML und CSS Code ist es möglich, Texte ein- und auszublenden. Nach wie vor sollten Sie sparsam mit diesen versteckten Inhalten umgehen, da Google alles, was beim Laden der Seite nicht sichtbar ist, nicht ins Suchergebnis aufnimmt. Weitere Informationen zu diesem Thema finden Sie in unserem Beitrag „Google wertet versteckte Inhalte in Tabs und Akkordeons nicht„. Für FAQs lässt sich diese Methode dennoch gut verwenden.

Quelle Bilder: Eigene Screenshots