Anleitung für "weiter lesen" oder "mehr Inhalt anzeigen"

  • Hallo,


    ich würde auf meiner Seite gerne manche Textblöcke kürzen.


    Hier sollte stehen "mehr Text anzeigen" oder "weiterlesen". Auch sollte so ein Feld wieder mit "weniger anzeigen" erscheinen, um den Text wieder zu verkürzen.

    Solche Anleitungen habe ich gefunden.


    Ich würde mir jeodch eine Möglichkeiten wünschen, wo der Text etwas verläuft. Also zum Beispiel die letzten zwei Zeilen immer schwächer dargestellt werden.


    Weiß jemand wo ich so eine Anleitung finde oder kann mir sagen, wie es geht? :)


    Damit würde man mir sehr helfen :)

  • Vielen Dank für den Link :)


    Fast genau so habe ich es mir vorgestellt. Also der weiß-rot Verlauf ist super.

    Allerdings ist dieser auch da, wenn der Text geöffnet ist. Das ist ja nicht das Ziel, weil der Leser ja dann den Text nicht lesen kann.


    Kann ich das irgendwie abändern?

  • Natürlich kann man das abändern, hatte gehofft dass Du vielleicht selbst drauf kommst. Aber schauen wir uns das mal an:


    Wenn man sich das JavaScript anschaut, haben wir nur 2 Codeblöcke die was machen: if und else. Wenn wir genauer schauen, sehen wir, dass die if-Abfrage dafür sorgt, dass der Text wieder eingeklappt wird, das "else" sorgt dafür dass der weitere Text angezeigt wird, wenn man auf den Knopf drückt.


    Also müssen wir zum else-Codeblock stylesheets hinzufügen, die die gradient wieder entfernen. ( Das Gradient sorgt für den Verlauf ).


    maskImage also auf 'none' setzen:


    Code
    shortText.style.maskImage = 'none';

    und dann im if Block die Gradients wieder hinzufügen:

    Code
    shortText.style.maskImage = '-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))';

    Ich hoffe Du hast was gelernt.


    https://jsfiddle.net/wapcj1zm/3/

  • Hallo,


    leider muss ich das Thema noch einmal hochholen :(


    Ich habe das Script bei einem Abschnitt eingesetzt und es hat eigentlich super funktioniert. Bis auf den Punkt, dass der Farbverlauf auf dem PC beim öffnen weg ist und auf dem Smartphone weiterhin erscheint. Aber das sollte ich hinbekommen bzw ist nicht so wichtig.


    Allerdings würde ich gerne zwei Abschnitte einfügen, bei dem sich etwas öffnen soll.


    Leider klappt aber nur der erste Abschnitt auf und der zweite nicht.


    Ich hatte jetzt versucht einfach die Bezeichnungen dots, more u.s.w. in dots1, more1 u.s.w. zu ändern und dies entsprechend in der .js Datei auch einfügen. Damit ich quasi zwei unterschiedliche Befehle habe.


    Dies funktioniert nur leider nicht.


    Kann mir jemand helfen, wie ich es hinbekomme, dass ich mehrere Absätzer auf einer Seite einbinde und jeweils "weiterlesen" und "weniger anzeigen" zuordnen kann?


    Schönes Wochenende :)

  • Zitat

    Ich hatte jetzt versucht einfach die Bezeichnungen dots, more u.s.w. in dots1, more1 u.s.w. zu ändern und dies entsprechend in der .js Datei auch einfügen. Damit ich quasi zwei unterschiedliche Befehle habe.

    Das ist häufig der erste Ansatz, aber auch der schlechteste, weil man dann auch bei jedem neuen Textblock das CSS und das Javascript erweitern muss. Besser ist es, statt der IDs Klassen zu verwenden. Ich habe mal das letzte Fiddle hergenommen und entspr. umgeändert:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!