Mercurial > hg > MPIWGWeb
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