Text -> nur 2 Zeilen und ausklappbar

[Birgit Egger]

Hallo,

ich habe ein <div id="infoText"></div> und ich hänge in dieses div mit jQuery einen Text ein.
Der Text kann aber auch etwas länger sein (z.B. 20 Zeilen), daher möchte ich nur 2 Zeilen anzeigen mit ... danach und wenn man auf den Text kickt, dann soll der ganze Text angezeigt werden.

z.B.

Das ist ein sehr interessanter
Test und ich möchte den gesamten ...

Meine Frage ist jetzt, wie ich das mit jQuery machen kann - gibts da was out of the box (ich hab noch nichts gefunden, weiß aber uach nicht recht nach was ich suchen soll.)

So schaut mein Code jetzt aus zum append:
$('#infoText').append(runninginfo);

Vielen Dank für hilfreiche Posts!
lg
Birgit

[Matti Mäkitalo]

Hi,

ich habe ein <div id="infoText"></div> und ich hänge in dieses div mit jQuery einen Text ein.
Der Text kann aber auch etwas länger sein (z.B. 20 Zeilen), daher möchte ich nur 2 Zeilen anzeigen mit ... danach und wenn man auf den Text kickt, dann soll der ganze Text angezeigt werden.

Das geeignete Element ist IMHO das details-Element, für ältere Browser nachrüstbar mit einem geeigneten Polyfill.

Bis die Tage,
Matti

[Gunnar Bittersmann]

@@Matti Mäkitalo:

nuqneH

Das geeignete Element ist IMHO das details-Element

1. feature at risk

2. Nö. Im 'summary'-Element müsste eine Zusammenfassung oder ein Hinweis für den Nutzer (call to action) stehen, nicht der Beginn des Textes.

Qapla'

[Gunnar Bittersmann]

@@Birgit Egger:

nuqneH

Meine Frage ist jetzt, wie ich das mit jQuery machen kann

Per jQuery setzt/löschst du eine Klasse ("expanded") für das betreffende Element. Sonst nichts. Den Rest erledigt CSS:

.js #foo { height: 3em / * an Zeilenhöhe anpassen */ }  
.js #foo.expanded { height: auto }

Bei Bedarf auch Multi-Line Ellipsis in Pure CSS.

(Und <script>[code lang=javascript]document.documentElement.className += " js";</script>[/code] im head – kein jQuery hier!)

Qapla'