Webdesign - Accordion-Effekt mit einer interessanten Optik

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie funktioniert der Accordion-Effekt?

04Mär2014

Accordion-Effekt mit einer interessanten Optik


Der Accordion-Effekt ist eine mit JavaScript (objektorientierte Programmiersprache) umgesetzte Textanimation und wird auf Webseiten immer populärer und interessanter. Es kann zum Beispiel per Klick auf eine Überschrift ein ausführlicher Text ein- oder ausgeblendet werden.
Der Effekt bietet eine interessante Optik und sorgt für optischen Platz auf einer Webseite.

Was soll der Accordion-Effekt auf diesen Seiten können?

  • Dass beim Aufruf der Seite zuerst alle Texte eingeklappt sind.
  • Die Texte auch mit ausgeschaltetem JavaScript (objektorientierte Programmiersprache) lesbar sind, das heißt die Texte sind dann ausgeklappt.
  • Dass der Bediener mehrere Texte gleichzeitig geöffnet haben kann. Es ist absolut verwirrend wenn ein Text, der über die Bildschirmseite hinausgeht, geöffnet ist und der Besucher einen anderen Text weiter unten auf der Seite öffnen möchte. Durch das automatische Schließen des ersten Textes macht die Seite einen Sprung nach oben und der Bediener verliert die Orientierung.

Wie habe ich also den Accordion-Effekt auf diesen Seiten umgesetzt?

Als erstes wird die JavaScript (objektorientierte Programmiersprache) -Klassenbibliothek "jQuery" am Ende der Seite, am besten direkt vom Google-Server, eingebunden.

Das hat zwei große Vorteile:

  • jQuery ist beim Besucher bereits geladen, da eine andere Website die er vorher besucht hatte auch jQuery eingebunden hat. Somit ist jQuery bereits im Cache des Besuchers und sofort verfügbar.
  • Normalerweise wird vom Google-Server schneller geladen, da es eine Beschränkung der gleichzeitig zu ladenden Dateien vom eigenen Webserver gibt.

Nun kann es aber im schlimmsten Fall vorkommen, dass der Server von Google die Bibliothek nicht zur Verfügung stellen kann. In dem Fall benötigt man eine "Fallback-Variante", die die Datei vom eigenen Server lädt. Der jQuery-Code wird also, wie in der HTML5 (HyperText Markup Language)-Boilerplate beschrieben, wie folgt eingebunden:

<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
</script>

<script>
    window.jQuery || document.write
    ('<script src="js/libs/jquery-1.7.0.min.js"><\/script>')
</scrip>

Danach wird für den "Accordion-Effekt" das folgende JavaScript (objektorientierte Programmiersprache) eingebunden:

$(document).ready( function() {
  $('.aus').not('.ein').next('.accordion').hide();
  $('.aus').click( function() {
    if ($(this).hasClass('ein')) {
      $(this).next('.accordion').slideToggle('slow');
      $(this).removeClass('ein');
    } else {
      $(this).next('.accordion').slideToggle('slow');
      $(this).addClass('ein');
    };
    return false;
  });
});

Dieses Script ist von mir jetzt so geändert, dass ein geöffneter Artikel offen bleibt, auch wenn ein zweiter Artikel geöffnet wird. Gerade auf der Seite Bewertungen war es wichtig, da es dort sehr lange Texte gibt die geöffnet werden. Die Anregung zu dem Script habe ich auf Norman's Blog gefunden.

Was macht nun das JavaScript (objektorientierte Programmiersprache)?
Zuerst werden alle "div-Container" geschlossen, die nicht die Klasse "ein" (p class="aus") haben. Durch einen Klick auf "Artikel weiterlesen" wird die Klasse des "p-Element" abgefragt und ausgetauscht (aus - ein). War die Klasse des "p-Element" auf "ein", wird der nachfolgende "div-Container" geschlossen. War die Klasse des "p-Element" auf "aus", wird der nachfolgende "div-Container" mit dem Text langsam eingeblendet. Der HTML (HyperText Markup Language)-Code sieht dabei wie folgt aus:

<p class="aus">
    » Artikel weiterlesen
</p>

<div class="accordion">
    <p>Text für den 1. Artikel</p>
</div>

Für das Design ist dann ausschließlich CSS (Cascading Style Sheet) verantwortlich.

.aus {
    color: #444;
    text-shadow: 1px 1px 1px #fff;
    cursor: pointer;
}

.aus:before {
    content: '»';
    padding: 0 10px;
}

.aus:hover,
.aus:focus {
    color: #444;
    text-decoration: none;
}

.ein {
    color: #111;
}

.ein:before {
    content: '-';
    padding: 0 12px;
}

.accordion {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #555;
    background: #fff;
}

Für das obige Beispiel sieht es dann so aus:

1. Artikel weiterlesen

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

2. Artikel weiterlesen

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

3. Artikel weiterlesen

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


Natürlich kann man bei kurzen Texten wie in dem Beispiel die geöffneten Artikel automatisch schließen lassen und das sieht dann so aus.

1a. Artikel weiterlesen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

2a. Artikel weiterlesen

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

3a. Artikel weiterlesen

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Hierfür wurde das JavaScript (objektorientierte Programmiersprache) im "else-Zweig" um zwei Zeilen ergänzt (fett markiert):

$(document).ready( function() {
  ...
    } else {
      $('.ein').next('.accordion').slideToggle('slow');
      $('.ein').removeClass('ein');
      $(this).next('.accordion').slideToggle('slow');
      $(this).addClass('ein');
    };
    return false;
  });
});

Das nächste Beispiel ist mit einem Button realisiert.

.aus2 {
    color: #444;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid #999;
    border-radius: 5px;
    background: linear-gradient(#ccc,#aaa);
    width: 80%;
    margin: 1em 1em 0;
    cursor: pointer;
    padding: 5px;
    transition: .3s ease;
    box-shadow: 0 0 1px #fff inset;
}

.aus2:before {
    content: '+';
    padding: 0 12px 0 5px;
}

.aus2:hover,
.aus2:focus,
.ein2 {
    color: #444;
    background: linear-gradient(#999,#aaa);
    transition: .3s ease;
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.5) inset;
}

.ein2 {
    color: #111;
}

.ein2:before {
    content: '-';
    padding: 0 14px 0 7px;
}

.accordion2 {
    width: 80%;
    margin: 0 1.3em;
    border-radius: 0 0 10px 10px;
    border: 1px solid #555;
    background: #fff;
}

Nun sieht es so aus:

4. Artikel weiterlesen

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, iusto delenit augue duis dolore te feugait nulla facilisi.

5. Artikel weiterlesen

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

6. Artikel weiterlesen

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


Das nächste Beispiel ist sowohl mit einem Button als auch mit einem kleinen Bild für einen Pfeil realisiert. Das Icon wechselt je nach Zustand die Pfeilrichtung. Außerdem ist der "slideToggle" im JavaScript (objektorientierte Programmiersprache) auf "fast" gestellt und der geöffnete Text ist mit einem Rand versehen. Somit sieht man genau welcher Teil des Textes sich geöffnet hat.

Hierfür wurde das JavaScript (objektorientierte Programmiersprache) für das zusätzliche "span-Element" ebenfalls um zwei Zeilen ergänzt (fett markiert):

$(document).ready( function() {
  ... {
    if ($(this).hasClass('ein')) {
      $(this).next('.accordion').slideToggle('fast');
      $(this).removeClass('ein');
      $(this).children('span').removeClass('auf');
    } else {
      $(this).next('.accordion').slideToggle('fast');
      $(this).addClass('ein');
      $(this).children('span').addClass('auf');
    };
    return false;
  });
});

Durch einige Tests konnte ich dann noch das JavaScript (objektorientierte Programmiersprache) um einige Zeilen verkürzen, in dem ich mit "toggleClass", anstatt "removeClass" und "addClass" arbeite.

Zur Erklärung:
Der Befehl "$('.aus').not('.ein').next('.accordion').hide();" sorgt für das Schließen der Texte beim Aufruf der Seite,
der Befehl "$(this).toggleClass('ein');" tauscht die Farbe des Button aus,
der Befehl "$(this).children('span').toggleClass('zu auf');" sorgt für den Wechsel des Pfeil-Symbols.

$(document).ready( function() {
  $('.aus').not('.ein').next('.accordion').hide();
  $('.aus').click( function() {
    $(this).next('.accordion').slideToggle('fast');
    $(this).toggleClass('ein');
    $(this).children('span').toggleClass('zu auf');
  });
});

Durch einen Klick auf "Artikel weiterlesen" wird nicht nur die Klasse des "p-Element" ausgetauscht (aus - ein), sondern auch die Klasse des "span-Element" (zu - auf). Der HTML (HyperText Markup Language)-Code wird wie folgt ergänzt:

<p class="aus">
    » Artikel weiterlesen 
    <span class="pfeil zu"> </span>
</p>

<div class="accordion">
    <p>Text für den 7. Artikel mit Button und kleinem Pfeil</p>
</div>

Und das zugehörige CSS (Cascading Style Sheet):

.aus3 {
    color: #444;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid #fff;
    border-bottom: 0;
    border-radius: 5px;
    background: linear-gradient(#fff,#929ba5);
    width: auto;
    margin: 1em 0 0 1em;
    cursor: pointer;
    padding: 5px 10px 5px 20px;
    box-shadow: 0 1px 1px #000;
}

.aus3:hover,
.aus3:focus,
.ein3 {
    color: #444;
    background: linear-gradient(#fff,#b4bfcb);
}

.ein3 {
    color: #111;
}

.accordion3 {
    width: auto;
    margin: -3px 0 15px 1em;
    box-shadow: 0 1px 1px #000;
    border-radius: 0 0 5px 5px;
    background: #fff;
}

.pfeil {
    float: right;
    display: block;
    height: 1.6em;
    width: 1.06em;
}

.zu {
    background: url(pfeil.png) left no-repeat;
}

.auf {
    background: url(pfeil.png) right no-repeat;
}

Das sieht jetzt richtig schick aus und erfüllt all meine Anforderungen!

7. Artikel weiterlesen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

8. Artikel weiterlesen

Ut wisi enim ad minim veniam, quis nostrud ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

9. Artikel weiterlesen

Ut wisi enim ad minim veniam, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


Eine weitere Möglichkeit stelle ich hier noch vor!

Der folgende Accordion-Effekt funktioniert völlig ohne jQuery und JavaScript (objektorientierte Programmiersprache) und der "Slide-Effekt" wird ausschließlich mit CSS3 (Cascading Style Sheet) umgesetzt.
Allerdings besteht eine Einschränkung bei Browsern die die Eigenschaft "transition" nicht verstehen und umsetzen. Aber dafür stelle ich einen Ausweg per Conditional Comments bereit.

Das HTML (HyperText Markup Language)-Grundgerüst dieses Accordion-Effekts sieht zuerst einmal wie folgt aus:

<div class="accordion4">
    <div id="Artikel10">
        <h3><a href="#Artikel10">10. Artikel weiterlesen</a></h3>
        <p>Text für den 10. Artikel.</p>
    </div>
    .
    .
    .
</div>

Nun folgt noch das Wichtigste für diesen Effekt, das CSS3 (Cascading Style Sheet).

.accordion4 {
    width: auto;
    margin: -3px 0 15px 1em;
}

.accordion4 h3 {
    font-size: 1em;
    margin: 5px 0;
    padding: 0;
}

.accordion4 h3 a {
    color: #444;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid #fff;
    border-bottom: 0;
    border-radius: 5px;
    display: block;
    text-decoration: none;
    margin: 5px 0;
    padding: 10px;
    background: linear-gradient(#fff,#929ba5);
    box-shadow: 0 1px 1px #000;
}

.accordion4 :target h3 a,
.accordion4 h3 a:focus,
.accordion4 h3 a:hover {
    background: linear-gradient(#fff,#b4bfcb);
}

.accordion4 p {
    padding: 0 10px;
    margin: -5px 0 0;
    height: 0;
    overflow: hidden;
    box-shadow: 0 1px 1px #000;
    border-radius: 0 0 5px 5px;
    background: #fff;
    transition: 1s ease;
}

.accordion4 :target p {
    overflow: auto;
    height: 6.25em;
}

Mit der Pseudoklasse ":target" wird der aufgeklappten Textüberschrift der gleiche Farbverlauf zugewiesen wie beim Hover-Effekt.

Damit komme ich aber zu der Eigenschaft "transition" durch die dieser Effekt erst möglich ist. Mit dieser Eigenschaft wird ein fließender Übergang von dem ein- zum ausgeklappten Text erzeugt. In diesem Beispiel dauert der Effekt eine Sekunde. Hierzu wird zuerst die Höhe im zugeklappten Textfeld auf "Null" gesetzt und im ausgeklappten Zustand auf die gewünschte Höhe (hier 6.25 em).

Die Einschränkung bildet der Internet Explorer mit der Version kleiner 8, der diese Eigenschaft leider noch nicht unterstützt. Um die Texte aber auch für IE-Nutzer zur Verfügung zu stellen, muss der Wert der Höhe bei ".accordion4 p" von Null auf die benötigte Texthöhe angepasst werden. Am besten wird hierfür per Conditional Comments die "benötigte Höhe" im ausgeklappten Zustand angegeben oder aber mit "overflow: auto" für einen Scrollbalken gesorgt.

10. Artikel weiterlesen

Consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

11. Artikel weiterlesen

Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

12. Artikel weiterlesen

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore.

Aber es gibt bei dieser Version noch einen großen Nachteil!
Weil der Effekt mit Verweisen aufgebaut ist, springt beim Anklicken eines Buttons die Seite nach oben, bis zum angewählten Button und öffnet erst dann den Text.
Aus dem Grund habe ich diesen Accordion-Effekt weiter optimiert.


Der optimale Accordion-Effekt!

Auch dieser Effekt funktioniert wieder völlig ohne jQuery und JavaScript (objektorientierte Programmiersprache).
Realisiert wird er mit Radiobuttons "<input type="radio" ...>" oder Checkboxen "<input type="checkbox" ...>". Bei den Radiobuttons kann immer nur ein Button ausgewählt werden, während bei den Checkboxen keine, eine oder mehrere Boxen angewählt werden. Damit erreiche ich dass bei einem Aufbau mit Radiobuttons der geöffnete Text, bei Anwahl eines anderen Buttons, geschlossen wird, während bei einem Aufbau mit Checkboxen mehrere Texte gleichzeitig ausgeklappt werden können.

Das HTML (HyperText Markup Language)-Grundgerüst dieses Accordion-Effekts mit Radiobuttons sieht zuerst einmal wie folgt aus:

<div class="accordion5">
    <section>
        <input type="radio" id="r1" name="ra" value="">
        <label for="r1">13. Artikel weiterlesen</label>
        <div>
            <h3>Überschrift des ersten Artikels</h3>
            <p>Text für den 13. Artikel.</p>
        </div>
    </section>
    .
    .
    .
</div>

Oder mit Checkboxen:

<div class="accordion5">
    <section>
        <input type="checkbox" id="c1" name="ca" value="">
        <label for="c1">17. Artikel weiterlesen</label>
        <div>
            <h3>Überschrift des ersten Artikels</h3>
            <p>Text für den 17. Artikel.</p>
        </div>
    </section>
    .
    .
    .
</div>

Das CSS3 (Cascading Style Sheet) ist dann für beide Varianten gleich.

.accordion5 {
    width: auto;
    margin: 0 auto;
}

.accordion5 [type=radio],
.accordion5 [type=checkbox] {
    display: none;
}

.accordion5 label {
    color: #444;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid #fff;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    display: block;
    margin: 3px 0 0;
    padding: 10px;
    background: linear-gradient(#fff,#929ba5);
    box-shadow: 0 1px 1px #000;
    transition: all 1s ease-in;
}

.accordion5 label:hover {
    background: linear-gradient(#fff,#b4bfcb);
    color: #444;
}

.accordion5 [type=radio]:checked ~ label,
.accordion5 [type=checkbox]:checked ~ label {
    background: linear-gradient(#fff,#b4bfcb);
    color: #5aff00;
    text-shadow: 1px 1px 0 #555;
}

.accordion5 label:before {
    content: '»';
    padding: 0 12px 0 5px;
}

.accordion5 [type=radio]:checked ~ label:before,
.accordion5 [type=checkbox]:checked ~ label:before {
    content: '-';
    padding: 0 14px 0 7px;
}

.accordion5 [type=radio]:checked ~ label + div,
.accordion5 [type=checkbox]:checked ~ label + div {
    overflow: auto;
    height: 19em;
    border-radius: 0 0 5px 5px;
}

.accordion5 div {
    height: 0;
    padding: 0 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #929ba5;
    transition: all 1s ease-in;
}

.accordion5 p {
    color: #333;
}

.accordion5 h3 {
    color: #444;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
    padding: 5px 10px;
}

Zuerst werden die Radiobuttons und Checkboxen als unsichtbar gekennzeichnet und anstatt der Überschrift aus dem vorherigen Accordion-Effekt, wird hier das "label-Element" verwendet.

Bei dem Befehl "[type=radio]:checked ~ label" benutze ich den "General Sibling Combinator", der durch eine Tilde "~" dargestellt wird.
Dieser hat eine ähnliche Funktion wie der "Adjacent Sibling Combinator". Möchte man zum Beispiel den Text, der direkt nach einer Überschrift "<h3>" folgt in roter Schrift darstellen, wird das wie folgt geschrieben: "h3 + p {color: #f00;}". Hierbei wird nur der erste Absatz in rot geschrieben, danach folgt wieder die normal eingestellte Farbe für das "p-Element".
Beim "General Sibling Combinator (~)" wird jeder nachfolgende Text in rot dargestellt und die Schreibweise lautet: "h3 ~ p {color: #f00;}".

Bei meinem Beispiel wird also nach erfolgter Anwahl eines Buttons oder Box der Hintergrund, wie beim Überfahren mit der Maus, gewechselt und eine andere Schriftfarbe gewählt. Durch den Befehl "[type=radio]:checked ~ label" oder "[type=checkbox]:checked ~ label" werden alle Labels abgefragt.
Und mit ".accordion5 [type=radio]:checked ~ label + div" wird nur der erste folgende div-Container nach einem Label auf 19 em Höhe geöffnet und gegebenenfalls ein Scrollbalken eingeblendet.

Beim folgenden Accordion-Effekt ist nur ein Text ausklappbar.

Überschrift des ersten Artikels

Consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.

Überschrift des zweiten Artikels

Vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait dolore magna aliquam erat volutpat.

Überschrift des dritten Artikels

Ut wisi enim ad minim veniam, quis dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Überschrift des vierten Artikels

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Und bei diesem Accordion-Effekt sind mehrere Texte gleichzeitig ausklappbar.

Erste Überschrift die offen bleibt

Sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Zweite Überschrift die offen bleibt

Nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Dritte Überschrift die offen bleibt

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Vierte Überschrift die offen bleibt

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Das entspricht nun völlig meinen Vorstellungen und Wünschen und ist eine sehr elegante und einfache Möglichkeit versteckten Text ohne jQuery und JavaScript (objektorientierte Programmiersprache) einzublenden!

Perfekt!

Zum Seitenanfang springen Λ