Mercurial > hg > MPIWGWeb
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 }); |