Changes for page Show Hide Macro

Last modified by jklein on 2025/06/02 14:04

From version 7.2
edited by jklein
on 2025/06/02 09:39
Change comment: There is no comment for this version
To version 9.8
edited by jklein
on 2025/06/02 09:58
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -3,7 +3,7 @@
3 3  with the same kind of CSS rules. However, it is now based on jQuery, and need requireJS, so it requires
4 4  XWiki 5.x or more.
5 5  
6 -{{showhide title="PublicAPI"}}
6 +{{showhide title="PublicAPI" effect="slide" effectduration="0.5"}}
7 7  Inhalt
8 8  Inhalt
9 9  Inhalt
XWiki.JavaScriptExtension[0]
Code
... ... @@ -20,7 +20,7 @@
20 20   }
21 21  
22 22   $(document).ready(function() {
23 - $('.showhidebutton').children('a').on('click', onClick);
23 + $('.showhide-header).on('click', onClick);
24 24   });
25 25  });
26 26  
XWiki.StyleSheetExtension[0]
Code
... ... @@ -1,8 +1,16 @@
1 +.showhide-header {
2 + border: 1px solid #ccc;
3 + background-color: #f7f7f7;
4 + border-radius: 4px 4px 0 0;
5 + padding: 8px 12px;
6 + margin-bottom: 0;
7 +}
8 +
1 1  .showhide-header-flex {
2 2   display: flex;
3 3   justify-content: space-between;
4 4   align-items: center;
5 - padding: 6px 10px;
13 + padding: 6px 0px;
6 6   font-weight: bold;
7 7  }
8 8  
... ... @@ -17,3 +17,19 @@
17 17   font-weight: normal;
18 18  }
19 19  
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 +}
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -20,24 +20,19 @@
20 20  #set($title = $escapetool.xml($mparams.title))
21 21  (% #if($divstyle && $divstyle!="") style="${divstyle}" #end %)
22 22  (((
23 -(% class="showhide-header" %)
24 -(((
25 25  {{html clean=false}}
26 -<div class="showhide-header-flex">
27 - <div class="showhide-title">$title</div>
28 - <div class="showhidebutton">
29 - <a href="javascript:void(0)"
30 - #if($id && $id!="")id="showhidebuttontext${id}" #end
31 - data-show-duration="$effectduration"
32 - data-show-effect="$effect"
33 - data-show-message="$showmessage"
34 - data-hide-message="$hidemessage">
35 - ► $showmessage
36 - </a>
24 +<div class="showhide-header"
25 + #if($id && $id!="") id="showhideheader${id}" #end
26 + data-show-duration="$effectduration"
27 + data-show-effect="$effect"
28 + data-show-message="$showmessage"
29 + data-hide-message="$hidemessage">
30 + <div class="showhide-header-flex">
31 + <div class="showhide-title">$title</div>
32 + <div class="showhide-icon">► $showmessage</div>
37 37   </div>
38 38  </div>
39 39  {{/html}}
40 -)))
41 41  (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %)
42 42  (((
43 43  (((
XWiki.WikiMacroParameterClass[3]
Parameter default value
... ... @@ -1,1 +1,1 @@
1 -toggle
1 +slide
© Aagon GmbH 2025
Besuchen Sie unsere Aagon-Community