changeset 103:79a198e7b1b7

foldable table rows.
author casties
date Mon, 27 May 2013 11:32:30 +0200
parents bde0929d34fb
children cafdf06c77ce
files css/mpiwg.css js/mpiwg.js
diffstat 2 files changed, 57 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/css/mpiwg.css	Fri May 24 08:20:47 2013 +0200
+++ b/css/mpiwg.css	Mon May 27 11:32:30 2013 +0200
@@ -897,6 +897,17 @@
     padding: 0.5em 0 0 20px;
 }
 
+table.items .thumb_fold {
+	position: relative;
+	padding-left: 14px;
+}
+
+table.items .thumb_fold .fold_head {
+	position: absolute;
+	left: 0;
+	top: 3px;
+}
+
 ul.items {
     list-style-type: none;
     padding: 0;
@@ -929,7 +940,8 @@
     color: #3b4186;
 }
 
-.foldable img.fold_closed {
+.foldable img.fold_closed,
+.foldableById img.fold_closed {
     /* fold is initially open */
     display: none;
 }
--- a/js/mpiwg.js	Fri May 24 08:20:47 2013 +0200
+++ b/js/mpiwg.js	Mon May 27 11:32:30 2013 +0200
@@ -14,13 +14,24 @@
 
     /*
      * foldout divs
+     * 
+     * foldable: .foldable is ancestor of .fold_head and .fold_body
+     *   that are folded simultaneously.
+     * 
+     * foldableById: .foldableById is ancestor of multiple .fold_head and .fold_body
+     *   where each pair has a common unique .foldId_xxx.
+     * 
+     * Clicking on .fold_head folds and unfolds .fold_body.
+     *  
+     * If .foldable has .initially_open .fold_body is initially shown, else its 
+     * initally hidden.
      */
-    $('.foldable').each(function() {
+    $('.foldable').each(function () {
         var $this = $(this);
         var $head = $this.find('.fold_head');
         var $img = $head.find('img');
         var $body = $this.find('.fold_body');
-        $head.on('click', function() {
+        $head.on('click', function () {
             $body.slideToggle('fast');
             $img.toggle();
         }).css('cursor', 'pointer');
@@ -30,4 +41,35 @@
             $img.toggle();
         }
     });
+    $('.foldableById').each(function () {
+        var $container = $(this);
+        var io = $container.hasClass('initially_open');
+        var $heads = $container.find('.fold_head');
+        $heads.each(function () {
+            var $this = $(this);
+            var $img = $this.find('img');
+            var id = null;
+            // find id in class
+            var cls = $this.attr('class').split(' ');
+            for (var i = 0; i < cls.length; ++i) {
+                var c = cls[i];
+                if (c.startsWith('foldId_')) {
+                    id = c;
+                    break;
+                }
+            }
+            if (id == null) return;
+            // get body using id
+            var $body = $container.find('.fold_body.'+id);
+            $this.on('click', function () {
+                $body.slideToggle('fast');
+                $img.toggle();
+            });
+            if (!io) {
+                // hide body initially
+                $body.hide();
+                $img.toggle();
+            }
+        }).css('cursor', 'pointer');
+    });
 }); 
\ No newline at end of file