Summary
-
Objects (3 modified, 0 added, 0 removed)
Details
- XWiki.JavaScriptExtension[0]
-
- Code
-
... ... @@ -3,8 +3,7 @@ 3 3 var header = $(this), 4 4 content = header.next('.showhidecontent'), 5 5 effect = header.attr('data-show-effect'), 6 - duration = parseInt(header.attr('data-show-duration')) || 300, 7 - arrow = header.find('.showhide-arrow'); 6 + duration = parseInt(header.attr('data-show-duration')) || 300; 8 8 9 9 if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) === -1) { 10 10 effect = 'toggle'; ... ... @@ -13,12 +13,10 @@ 13 13 var isVisible = content.is(':visible'); 14 14 var newState = !isVisible; 15 15 16 - // Pfeil wechseln 17 - if (arrow.length) { 18 - arrow.text(newState ? '▼' : '►'); 19 - } 15 + // Toggle 'open'-Klasse für Rotation 16 + header.toggleClass('open', newState); 20 20 21 - // Inhalt ein-/ausklappen18 + // Ein-/Ausblenden des Inhalts 22 22 content.stop()[effect](duration); 23 23 } 24 24 - Name
-
... ... @@ -1,1 +1,1 @@ 1 -APIMacro Script1 +APIMacro
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -20,11 +20,16 @@ 20 20 } 21 21 22 22 .showhide-arrow { 23 + display: inline-block; 24 + transition: transform 0.3s ease; 25 + transform: rotate(0deg); 23 23 font-size: 16px; 24 - font-weight: bold; 25 25 color: #0645ad; 26 - text-align: right; 27 - min-width: 20px; 28 - transition: transform 0.2s ease; 29 29 } 30 30 30 +/* Wenn Container 'open' ist → Pfeil dreht sich */ 31 +.showhide-header.open .showhide-arrow { 32 + transform: rotate(90deg); 33 +} 34 + 35 +
- XWiki.WikiMacroClass[0]
-
- Macro code
-
... ... @@ -27,10 +27,12 @@ 27 27 data-show-effect="$effect"> 28 28 <div class="showhide-header-flex"> 29 29 <div class="showhide-title">$title</div> 30 - <div class="showhide-arrow"> ►</div>30 + <div class="showhide-arrow">▶</div> ## Unicode ▶ 31 31 </div> 32 32 </div> 33 33 {{/html}} 34 +</div> 35 +{{/html}} 34 34 (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %) 35 35 ((( 36 36 (((