Tipps

Elemente nur mit CSS verstecken

Elemente nur mit CSS ein- und ausblenden

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.
Akkordeon

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.
Versteckter Inhalt ist nicht zu sehen

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„.
Versteckter-Inhalt-ist-sichtbar

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.
Der Code im Text-Editor der Seite

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.
Rohzustand des Akkordeons

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.
Hier finden Sie den Customizer

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.
Den CSS-Code in den Customizer einfuegen

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

turned_in_notTutorials

15 Kommentare. Wir freuen uns über Ihren Kommentar

  • Vielen Dank, für die Anleitung! Was mir aufgefallen ist – wenn ich den Text durch das Klicken einblende, springt die Seite nach oben, so dass die durch das Klicken aufgeklappte Zeile sich am oberen Bildschirmrand befindet. Beim Zuklappen (ausblenden) wird der Seiteninhalt dann wieder nach unten verschoben. Kann ich das unterbinden?

    Antworten
  • Hallo! Genau diese Problematik habe ich gerade, jedoch würde es mich interessieren, wie es andersrum funktioniert; also wenn wir einen Text haben, und diesen verschwinden lassen, nachdem man z.B einen Link angeklickt hat. Dieser soll wieder erscheinen, sobald man diesen Link wieder anklickt! Über eine Antwort würde ich mich sehr freuen! Liebste Grüße!

    Antworten
  • Danke! Das war meine CSS-Rettung!
    Ich habe es mit einem Button von mir aufgemotzt und damit mein Menü für die kleineren Bildschirme einblendbar gemacht: Ist zu sehen auf: keytochoice.de
    Vielen herzlichen Dank!

    Antworten
  • Ich möchte gerne ihr Button unterhalb von meinem Textblock anordnen in der rechten Ecke und würde gerne wissen welsche Parameter ich ändern muss .

    Antworten
  • Ich habe mal eine frage: wie kann ich ihr Batten rechts unterhalb des Textes anordnen

    Antworten
  • Hallo,
    wenn ich mehrer „akkordeon“ untereinander haben möchte habe ich das ganze kopiert und mit „akkordeon_1“, „akkordeon_2“, etc. benannt, auch im css.
    Allerdings ist dann der Schließen Button nur einmal dau und wenn ich dann auf akkordeon_2 klicke ist er weg.
    Was muss man beachten wenn man mehrere aufführt?

    Antworten
  • Hallo und vielen Dank für die sehr gute und ausführliche Erklärung – damit kriegen sogar Anfänger wie ich die Lösung umgesetzt.
    Ich habe noch eine Frage: (Wie) kann man mehrere Texte ein- und ausblenden?
    Danke und viele Grüße

    Antworten
  • Kann es sein, dass dieser Code unter dem aktuellen Windows Internet Explorer nicht funktioniert? Bei Opera und Firefox funktioniert der oben angeführte Code mit dem ein- und ausblenden hervorragend. Wie muss ich den Code ergänzen, das dieser auch im Internet Explorer funktioniert?

    Antworten
  • Danke für diesen informativen Artikel.
    Mir ist dabei eine Frage gekommen. Und zwar folgende:
    wie kann ich ein bestimmtes Element, das beim Aufruf der Seite sichtbar ist, nach 3 s entfernen bzw. das Element zur nach 3 s dann plötzlich nicht mehr sichtbar sein. Wie kann ich das bewerkstelligen?

    Antworten
  • Nochmal Dora,
    ja , sämtliche Code -Elemente oder was danach aussieht, werden sofort
    automatisch (?) gelöscht. Auch im obigen Beispiel. So ist natürlich nichts möglich hier.
    Vergiss diese Seite.
    Es gibt andere gute Quellen, z.B.
    https://wiki.selfhtml.org
    Gruß
    Dora

    Antworten
  • Tolles Feature!
    Hat erst nicht geklappt, habe es schon auf das Theme geschoben, es ist nicht das im Beispiel genannte Twenty Seventeen.
    Dann nach langem Suchen, wo mein Fehler sein könnte, habe ich einen winzigen aber entscheidenden „Fehler“ in Ihrem Code entdeckt:
    geht nicht, aber
    funktioniert.
    Danke
    Dora

    Antworten
    • Hallo zusammen, vielen Dank für die tollen Infos. Ich bin blutiger Anfänger und komme dank Ihrer Seite ganz gut zurecht.
      Leider funktioniert. Anscheinend soll sich im Code ein Fehler eingeschlichen haben, leider kann ich diesen als blutiger Anfänger nicht finden.
      Können Sie mir da weiter helfen?
      Vielen Dank!!
      Gruß
      Martina

      Antworten
      • Hallo Martina,
        ich habe tatsächlich einen winzigen Fehler entdeckt und den oben auch gemeldet. Leider stelle ich mit Erstaunen fest, dass
        a) die letzte Zeile meiner Meldung so amputiert wurde, dass der Fehler nicht aufgeführt wurde.
        b) auch deine Fehlermeldung “ Leider funktioniert. ….“ auch nicht vollständig ist.
        C) der „entscheidende Fehler “ in meiner verstümmelten Mail aber doch im obgenannten Code berichtigt wurde! Ohne aber darauf hinzuweisen;
        Da fehlt’s dann doch an Souveränität.
        Was war denn nun der kleine Fehler?
        ist jetzt richtig.
        In der falschen Ausgabe stand das erste Anführungszeichen unten.
        Warum man hier nun hektisch in Löschaktionismus verfällt, ist mir völlig
        rätselhaft. Vielleicht ein Automat?
        Als Anfängerin, als die ich mich auch bezeichne, solltest du wissen, dass
        ein Teil des Codes in den benutzerdefinierten Css-Code geschrieben wird
        und ein Teil in die WordPress-Seite eingetragen werden muss.
        Un zwar dieser Teil:
        Zusätzliche InfosWeniger Infos
        Gut zu Wissen
        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.
        Ich bin mir aber nicht sicher, dass diese Infos auch unverstümmelt ankommen.
        Gruß
        Dora

        Antworten
        • Kim Salewski
          9. Februar 2017 8:40

          Guten Tag Dora,
          Ich versuche das Durcheinander einmal zu lösen.
          In der Kommentarfunktion wird Code, den man eingibt, schlichtweg nicht übermittelt/gelöscht.
          Daher kam bei uns/in der Kommentarsektion eine unvollständige Nachricht an, daher konnten wir deiner Nachricht nicht entnehmen, wo der Fehler lag.
          Wir haben uns gestern kurz auf die Suche nach dem Fehler gemacht und einen Fehler in den Anführungszeichen des HTML-Codes bei „akkordeon“ gefunden.
          Hier hat WordPress die ersten automatisch unten angeordnet, wobei sie im Code oben stehen müssen.
          Wir haben es aus Zeitgründen aber zunächst nur schnell im Beitrag korrigieren können, damit in Zukunft hoffentlich keine Verwirrungen mehr auftreten.
          Ich hoffe, dass sich die Verwirrung gelöst hat.
          Mit freundlichen Grüßen,
          Kim

          Antworten

Wir freuen uns über Ihren Kommentar!

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fill out this field
Fill out this field
Bitte geben Sie eine gültige E-Mail-Adresse ein.
You need to agree with the terms to proceed

expand_less
  Elbnetz GmbH hat 4,96 von 5 Sternen 54 Bewertungen auf ProvenExpert.com