Guest User

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

a guest
Feb 9th, 2012
1,329
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html lang="de" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function(){
  8.     $(".da").click(function(){ // trigger
  9.         $(this).next(".do").slideToggle("medium"); // blendet beim Klick das div da das div do ein.
  10.         $(this).children("a").toggleClass("closed open"); // Klick auf DIV "da" wechselt a-tag von "closed" zu "open" -- arrow flipover
  11.         $(this).children("span").toggleClass("hier weg"); // macht die drei Punkte hinter jedem Paragraphen auf klick unsichtbar und wieder sichtbar
  12.     });
  13. });
  14. </script>
  15. <style type="text/css">
  16. .da {cursor:pointer;text-align:justify; width:200px;}
  17. .do {display:none; text-align:justify; width:200px;}
  18. .hier {visibility:visible; color: #666152; text-decoration:underline;}
  19. .weg  {display:none;}
  20. .closed {float:right; height:18px; width:17px; margin-top:-17px; margin-right:-25px; text-indent:-9999px; background:url(button.png) left no-repeat;}
  21. .open {float:right; height:18px; width:17px; margin-top:-17px; margin-right:-25px; text-indent:-9999px; background:url(button.png) right no-repeat;}
  22. </style></head>
  23. <body>
  24.  
  25. <blockquote>
  26.   <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>
  27.   <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
  28.   </div>
  29. </blockquote>
  30.  
  31.  
  32. </body></html>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×