comparison js/mpiwg.js @ 103:79a198e7b1b7

foldable table rows.
author casties
date Mon, 27 May 2013 11:32:30 +0200
parents 04a26a5d3d1d
children bf3dc3a12147 782477730916
comparison
equal deleted inserted replaced
102:bde0929d34fb 103:79a198e7b1b7
12 // hide submit button 12 // hide submit button
13 $('form.autosubmit input[type="submit"].autosubmit').hide(); 13 $('form.autosubmit input[type="submit"].autosubmit').hide();
14 14
15 /* 15 /*
16 * foldout divs 16 * foldout divs
17 *
18 * foldable: .foldable is ancestor of .fold_head and .fold_body
19 * that are folded simultaneously.
20 *
21 * foldableById: .foldableById is ancestor of multiple .fold_head and .fold_body
22 * where each pair has a common unique .foldId_xxx.
23 *
24 * Clicking on .fold_head folds and unfolds .fold_body.
25 *
26 * If .foldable has .initially_open .fold_body is initially shown, else its
27 * initally hidden.
17 */ 28 */
18 $('.foldable').each(function() { 29 $('.foldable').each(function () {
19 var $this = $(this); 30 var $this = $(this);
20 var $head = $this.find('.fold_head'); 31 var $head = $this.find('.fold_head');
21 var $img = $head.find('img'); 32 var $img = $head.find('img');
22 var $body = $this.find('.fold_body'); 33 var $body = $this.find('.fold_body');
23 $head.on('click', function() { 34 $head.on('click', function () {
24 $body.slideToggle('fast'); 35 $body.slideToggle('fast');
25 $img.toggle(); 36 $img.toggle();
26 }).css('cursor', 'pointer'); 37 }).css('cursor', 'pointer');
27 if (! $this.hasClass('initially_open')) { 38 if (! $this.hasClass('initially_open')) {
28 // hide body initially 39 // hide body initially
29 $body.hide(); 40 $body.hide();
30 $img.toggle(); 41 $img.toggle();
31 } 42 }
32 }); 43 });
44 $('.foldableById').each(function () {
45 var $container = $(this);
46 var io = $container.hasClass('initially_open');
47 var $heads = $container.find('.fold_head');
48 $heads.each(function () {
49 var $this = $(this);
50 var $img = $this.find('img');
51 var id = null;
52 // find id in class
53 var cls = $this.attr('class').split(' ');
54 for (var i = 0; i < cls.length; ++i) {
55 var c = cls[i];
56 if (c.startsWith('foldId_')) {
57 id = c;
58 break;
59 }
60 }
61 if (id == null) return;
62 // get body using id
63 var $body = $container.find('.fold_body.'+id);
64 $this.on('click', function () {
65 $body.slideToggle('fast');
66 $img.toggle();
67 });
68 if (!io) {
69 // hide body initially
70 $body.hide();
71 $img.toggle();
72 }
73 }).css('cursor', 'pointer');
74 });
33 }); 75 });