| ... |
... |
@@ -1,16 +1,29 @@ |
| 1 |
1 |
require(['jquery'], function($) { |
| 2 |
2 |
function onClick () { |
| 3 |
3 |
var button = $(this), |
| 4 |
|
- content = button.parent().next(), |
| 5 |
|
- effect = button.attr('data-show-effect'), |
| 6 |
|
- data = button.data(); |
| 7 |
|
- if($.inArray(effect,['toggle','fadeToggle','slideToggle']) == -1) effect = 'toggle'; |
|
4 |
+ content = button.parent().next(), |
|
5 |
+ effect = button.attr('data-show-effect'), |
|
6 |
+ data = button.data(); |
|
7 |
+ |
|
8 |
+ if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1) |
|
9 |
+ effect = 'toggle'; |
|
10 |
+ |
|
11 |
+ // Toggle-Zustand berechnen |
| 8 |
8 |
data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible')); |
| 9 |
|
- button.html(button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message')); |
|
13 |
+ |
|
14 |
+ // Pfeil und Text setzen |
|
15 |
+ var message = button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message'); |
|
16 |
+ var icon = data.showHideState ? '▼ ' : '► '; |
|
17 |
+ button.html(icon + message); |
|
18 |
+ |
|
19 |
+ // Inhalt ein-/ausblenden |
| 10 |
10 |
content.stop()[effect](parseInt(button.attr('data-show-duration'))); |
|
21 |
+ |
| 11 |
11 |
return false; |
| 12 |
12 |
} |
|
24 |
+ |
| 13 |
13 |
$(document).ready(function() { |
| 14 |
14 |
$('.showhidebutton').children('a').on('click', onClick); |
| 15 |
15 |
}); |
| 16 |
16 |
}); |
|
29 |
+ |
