DIV toggling with jQuery - found on www.kulturbanause.de

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".da").click(function(){ // trigger
        $(this).next(".do").slideToggle("medium"); // blendet beim Klick das div da das div do ein.
        $(this).children("a").toggleClass("closed open"); // Klick auf DIV "da" wechselt a-tag von "closed" zu "open" -- arrow flipover
        $(this).children("span").toggleClass("hier weg"); // macht die drei Punkte hinter jedem Paragraphen auf klick unsichtbar und wieder sichtbar
    });
});
</script>
<style type="text/css">
.da {cursor:pointer;text-align:justify; width:200px;}
.do {display:none; text-align:justify; width:200px;}
.hier {visibility:visible; color: #666152; text-decoration:underline;}
.weg  {display:none;}
.closed {float:right; height:18px; width:17px; margin-top:-17px; margin-right:-25px; text-indent:-9999px; background:url(button.png) left no-repeat;}
.open {float:right; height:18px; width:17px; margin-top:-17px; margin-right:-25px; text-indent:-9999px; background:url(button.png) right no-repeat;}
</style></head>
<body>

<blockquote>
  <div class="da">Erster Teil des Textes, der platzmäßig noch hinpasst, bevor er dann abrupt vom Hinweis auf einen längeren Text abgebrochen wird <span class="hier">&rarr; mehr lesen</span><a class="closed" title="mehr lesen ..."></a></div>
  <div class="do">der dann hier erscheint, vorher aber versteckt war. Hier lassen sich auch auf Wunsch auch Paragraphen  einfügen. Außerdem DIVs statt dt / dd
  </div>
</blockquote>


</body></html>