JavaScript Snipe – CSS Attribut des next Span Element

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");
}
});

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.