Lebens- und Trauerhilfe e.V. – Düren
Seit Jahren war Verein ohne eigenen Webauftritt. Die Domäne war auf die Seiten des Bistums Aachen umgelenkt worden. Das sollte sich ändern!
⇒ mehrDer Akkordeon-Effekt (Texte ein- und ausklappen)
Das AkkordeonMit einem Klick auf eine der Überschriften zeigt sich der Inhalt zu ihr.
Der erste Akkordeon-Inhalt
Der Accordion-Effekt ist eine mit JavaScript 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 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.
Der zweite Inhalt
Proin vel ex eget felis pretium malesuada. Aliquam luctus sapien tellus, non cursus risus maximus at. Curabitur id diam et dolor aliquam dignissim eu ac est. Vivamus venenatis nisl sit amet turpis vehicula, convallis dictum urna blandit. Aenean maximus; ligula ac euismod feugiat, tellus nunc viverra eros, ac pharetra tellus quam porttitor turpis. Phasellus vitae elit ac turpis vehicula dictum sed ut quam. Cras id diam eleifend, pulvinar est eget, molestie nulla! Proin eget eros eu arcu dictum molestie nec quis orci. Aliquam eu sem at augue aliquam vehicula eget at urna. Nunc molestie elit lorem, venenatis gravida lorem mollis eget? Fusce mollis, sem non pulvinar volutpat, libero turpis cursus velit, et viverra nunc neque sed leo.
Der 3. und auch der letzte Text mit einem Bild
In rutrum, tortor id varius porttitor, velit velit dictum turpis, vel sollicitudin erat nunc semper metus. Nulla quis justo vulputate, pulvinar lorem ut, tempus nisl. Curabitur feugiat, massa vitae cursus suscipit, dolor velit rhoncus turpis, nec placerat leo leo non dui. Aenean dictum dolor semper lacus porta, at viverra lorem sodales. Nullam nec urna cursus, finibus metus scelerisque, semper metus. Phasellus non justo purus. Nullam et molestie metus. Nulla vitae est vitae ex porttitor cursus eu vitae massa. Vestibulum luctus felis sed nunc vulputate dictum. Phasellus eu pellentesque tortor, quis laoreet nunc.
tabs
Tab1
Unterüberschrift zu Tab1
Tab2
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Das Akkordeon in anderer Optik
Thema Nummer 1
Thema Nummer 1
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse.
Thema Nummer 2
Thema Nummer 2
Proin vel ex eget felis pretium malesuada. Aliquam luctus sapien tellus, non cursus risus maximus at. Curabitur id diam et dolor aliquam dignissim eu ac est. Vivamus venenatis nisl sit amet turpis vehicula, convallis dictum urna blandit. Aenean maximus; ligula ac euismod feugiat, tellus nunc viverra eros, ac pharetra tellus quam porttitor turpis. Phasellus vitae elit ac turpis vehicula dictum sed ut quam. Cras id diam eleifend, pulvinar est eget, molestie nulla! Proin eget eros eu arcu dictum molestie nec quis orci. Aliquam eu sem at augue aliquam vehicula eget at urna. Nunc molestie elit lorem, venenatis gravida lorem mollis eget? Fusce mollis, sem non pulvinar volutpat, libero turpis cursus velit, et viverra nunc neque sed leo.
Thema Nummer 3
Thema Nummer 3
In rutrum, tortor id varius porttitor, velit velit dictum turpis, vel sollicitudin erat nunc semper metus. Nulla quis justo vulputate, pulvinar lorem ut, tempus nisl. Curabitur feugiat, massa vitae cursus suscipit, dolor velit rhoncus turpis, nec placerat leo leo non dui. Aenean dictum dolor semper lacus porta, at viverra lorem sodales. Nullam nec urna cursus, finibus metus scelerisque, semper metus. Phasellus non justo purus. Nullam et molestie metus. Nulla vitae est vitae ex porttitor cursus eu vitae massa. Vestibulum luctus felis sed nunc vulputate dictum. Phasellus eu pellentesque tortor, quis laoreet nunc.
Letzter Absatz, direkt nach Akkordeon
In rutrum, tortor id varius porttitor, velit velit dictum turpis, vel sollicitudin erat nunc semper metus. Nulla quis justo vulputate, pulvinar lorem ut, tempus nisl. Curabitur feugiat, massa vitae cursus suscipit, dolor velit rhoncus turpis, nec placerat leo leo non dui. Aenean dictum dolor semper lacus porta, at viverra lorem sodales. Nullam nec urna cursus, finibus metus scelerisque, semper metus. Phasellus non justo purus. Nullam et molestie metus. Nulla vitae est vitae ex porttitor cursus eu vitae massa. Vestibulum luctus felis sed nunc vulputate dictum. Phasellus eu pellentesque tortor, quis laoreet nunc.