| ... |
... |
@@ -1,37 +1,26 @@ |
| 1 |
1 |
require(['jquery'], function($) { |
| 2 |
|
- function onClickHeader() { |
| 3 |
|
- var header = $(this), |
| 4 |
|
- content = header.next('.showhidecontent'), |
| 5 |
|
- effect = header.attr('data-show-effect'), |
| 6 |
|
- duration = parseInt(header.attr('data-show-duration')) || 300, |
| 7 |
|
- arrowEl = header.find('.showhide-arrow'), |
| 8 |
|
- iconEl = header.find('.showhide-icon'); |
|
2 |
+ function onClick () { |
|
3 |
+ var button = $(this), |
|
4 |
+ content = button.closest('.showhide-header').next('.showhidecontent'), |
|
5 |
+ effect = button.attr('data-show-effect'), |
|
6 |
+ data = button.data(); |
| 9 |
9 |
|
| 10 |
|
- if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) === -1) { |
|
8 |
+ if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1) |
| 11 |
11 |
effect = 'toggle'; |
| 12 |
|
- } |
| 13 |
13 |
|
| 14 |
|
- var isVisible = content.is(':visible'); |
| 15 |
|
- var newState = !isVisible; |
|
11 |
+ data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible')); |
| 16 |
16 |
|
| 17 |
|
- // Pfeil aktualisieren |
| 18 |
|
- if (arrowEl.length) { |
| 19 |
|
- arrowEl.text(newState ? '▼' : '►'); |
| 20 |
|
- } |
|
13 |
+ var message = button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message'); |
|
14 |
+ var icon = data.showHideState ? '▼ ' : '► '; |
|
15 |
+ button.html(icon + message); |
| 21 |
21 |
|
| 22 |
|
- // Nachricht rechts aktualisieren (optional) |
| 23 |
|
- if (iconEl.length) { |
| 24 |
|
- var message = newState |
| 25 |
|
- ? header.attr('data-hide-message') |
| 26 |
|
- : header.attr('data-show-message'); |
| 27 |
|
- iconEl.text(message); |
| 28 |
|
- } |
|
17 |
+ content.stop()[effect](parseInt(button.attr('data-show-duration'))); |
| 29 |
29 |
|
| 30 |
|
- content.stop()[effect](duration); |
|
19 |
+ return false; |
| 31 |
31 |
} |
| 32 |
32 |
|
| 33 |
|
- $(document).ready(function () { |
| 34 |
|
- $('.showhide-header').on('click', onClickHeader); |
|
22 |
+ $(document).ready(function() { |
|
23 |
+ $('.showhide-header).on('click', onClick); |
| 35 |
35 |
}); |
| 36 |
36 |
}); |
| 37 |
37 |
|
