JARVIS
Nachfolgend ein kurzer Snipe zum Javascript, dass das CSS Attribut des nächsten Span ausliest. Als Situation wird ein gekürzter Text angezeigt mit einem Button am Ende der den restlichen Text ausblendet. Drückt man auf den Button wird der Text in voller Länger angezeigt. Um dies zu erreichen wird der Text zuvor mit der CSS Eigenschaft display auf none gesetzt. Wird der Button gedrückt, wird die Eigenscahft auf inline geändert.
Als Bonus habe ich es so eingerichtet, dass wenn der Button nochmal gedrückt wird, der Text wieder ausgeblendet wird.
HTML Beispiel
Hier beginnt der Text. <button type="" class="showFullMessage" >[...]</button> <span "style="display:none;"> Und hier geht der Text weiter, wenn der Button gedrückt wird. </span>
JavaScript Snipe
jQuery(".showFullMessage").click(function(){
messageShowStatus = jQuery(this).next("span").css("display");
if(messageShowStatus == 'none'){
jQuery(this).next("span").css("display", "inline");
}else{
jQuery(this).next("span").css("display", "none");
}
});
Interessiert in verschiedenste IT Themen, schreibe ich in diesem Blog über Software, Hardware, Smart Home, Games und vieles mehr. Ich berichte z.B. über die Installation und Konfiguration von Software als auch von Problemen mit dieser. News sind ebenso spannend, sodass ich auch über Updates, Releases und Neuigkeiten aus der IT berichte. Letztendlich nutze ich Taste-of-IT als eigene Dokumentation und Anlaufstelle bei wiederkehrenden Themen. Ich hoffe ich kann dich ebenso informieren und bei Problemen eine schnelle Lösung anbieten. Wer meinen Aufwand unterstützen möchte, kann gerne eine Tasse oder Pod Kaffe per PayPal spenden – vielen Dank.