Summary
-
Objects (2 modified, 0 added, 0 removed)
Details
- XWiki.JavaScriptExtension[0]
-
- Code
-
... ... @@ -4,23 +4,21 @@ 4 4 content = header.next('.showhidecontent'), 5 5 effect = header.attr('data-show-effect'), 6 6 duration = parseInt(header.attr('data-show-duration')) || 300, 7 - iconEl= header.find('.showhide-icon');7 + arrow = header.find('.showhide-arrow'); 8 8 9 - // Sicherheitsprüfung für Effekt 10 10 if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) === -1) { 11 11 effect = 'toggle'; 12 12 } 13 13 14 - // Sichtbarkeitsstatus 15 15 var isVisible = content.is(':visible'); 16 16 var newState = !isVisible; 17 17 18 - // Nachricht +Pfeil setzen19 - varmessage = newState ? header.attr('data-hide-message') : header.attr('data-show-message');20 - varicon= newState ? '▼' : '►';21 - iconEl.html(icon + message);16 + // Pfeil wechseln 17 + if (arrow.length) { 18 + arrow.text(newState ? '▼' : '►'); 19 + } 22 22 23 - // Inhalt ein-/aus blenden21 + // Inhalt ein-/ausklappen 24 24 content.stop()[effect](duration); 25 25 } 26 26
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -2,8 +2,9 @@ 2 2 border: 1px solid #ccc; 3 3 background-color: #f7f7f7; 4 4 border-radius: 4px 4px 0 0; 5 - padding: 8px 12px; 6 - margin-bottom: 0; 5 + padding: 10px 12px; 6 + cursor: pointer; 7 + user-select: none; 7 7 } 8 8 9 9 .showhide-header-flex { ... ... @@ -10,45 +10,20 @@ 10 10 display: flex; 11 11 justify-content: space-between; 12 12 align-items: center; 13 - padding: 6px 0px; 14 - font-weight: bold; 15 15 } 16 16 17 17 .showhide-title { 18 18 flex: 1; 19 19 text-align: left; 19 + font-weight: bold; 20 20 } 21 21 22 -.showhidebutton a { 23 - text-decoration: none; 24 - cursor: pointer; 25 - font-weight: normal; 22 +.showhide-arrow { 23 + font-size: 16px; 24 + font-weight: bold; 25 + color: #0645ad; 26 + text-align: right; 27 + min-width: 20px; 28 + transition: transform 0.2s ease; 26 26 } 27 27 28 -.showhidecontent { 29 - border: 1px solid #ccc; 30 - border-top: none; 31 - border-radius: 0 0 4px 4px; 32 - padding: 10px; 33 - background-color: #fff; 34 -} 35 - 36 -.showhide-header:hover { 37 - background-color: #f0f0f0; 38 - cursor: default; 39 -} 40 - 41 -.showhidebutton a:hover { 42 - text-decoration: underline; 43 -} 44 - 45 -.showhide-icon { 46 - color: #0645ad; /* typisches Link-Blau */ 47 - text-decoration: underline; 48 - cursor: pointer; 49 -} 50 - 51 -.showhide-header:hover .showhide-icon { 52 - text-decoration: underline; 53 - color: #0b0080; /* dunkler beim Hover */ 54 -}

