Mit diesem Artikel möchte ich euch einen simplen Texteffekt mit ein bisschen JQuery Magie vorstellen. Der Effekt soll einen Textabschnitt durch einen Klick ein- bzw. ausblenden können und der Text soll zusätzlich mit einem FadeIn/FadeOut-Effekt animiert werden.

Als Grundlage für das JQuery-Snippet soll das folgende HTML-Markup dienen:

  <div class="textbox">
    <div class="box">
      <p>..</p>
      <p>...</p>
    </div>
    <p class="clickable">einklappen</p>
  </div>

Wichtig in diesem Zusammenhang ist das P-Tag mit der Klasse „clickable“. Durch diese Klasse wir der Effekt erst ermöglicht, es kann aber das P-Tag durch andere HTML-Elemente ersetzt werden – vorausgesetzt die Klasse bleibt erhalten. Das JQuery-Snippet für eine einfache und simple Animation sieht folgendermaßen aus:

$(".clickable").click(function() {
  $(this).siblings(".box").slideToggle('slow');
  if($(this).html()=="einklappen") {
    $(this).html("ausklappen");
  } else {
    $(this).html("einklappen");
  }
});

Mit diesem Sourcecode wird nun bei jedem Klick auf ein HTML-Element mit der Klasse „clickable“ ein slideToggle Effekt an der DIV-Box mit der Klasse „box“ ausgeführt. slideToggle erkennt den aktuellen Status der Box und entscheidet somit eigenständig, ob der Text aus- oder eingeblendet werden muss.

Mit der If-Bedingung wird lediglich der Text des Klickbereichs angepasst. Es wäre sicherlich nicht sonderlich schön, wenn dort einklappen stehen würde, aber ausklappen gemeint ist 😉

Zur Demo

Das Skript ist natürlich sehr simpel. Es soll keine Designer-Lösung sein, sondern die grundlegende Funktionsweise eines einfachen JQuery- FadeIn/FadeOut-Effekt zeigen.