# Wiki source code of Show Hide Macro

Last modified by Helge Dahl on 2018/01/22 10:41

#### Export

#### Office Formats

Export as PDF Export as ODT Export as RTF

#### Other Formats

Export as HTML
Show last authors

1 | Wiki macros implementation for simple show/hide of a content with some animations.
2 | This version 2.0 is HTML compatible with the old version, so that existing project could continue styling
3 | with the same kind of CSS rules. However, it is now based on jQuery, and need requireJS, so it requires
4 | XWiki 5.x or more.
5 |
6 | {{info}}Using ##id="..."## is still supported and provide the same HTML result but it is no more needed to achieve a working animation.{{/info}}
7 |
8 | == Without effect ==
9 |
10 | {{showhide showmessage="Show" hidemessage="Hide" style="background-color: #ccc"}}
11 | Here is some hidden content that can become visible
12 | Here is some hidden content that can become visible
13 | Here is some hidden content that can become visible
14 | Here is some hidden content that can become visible
15 | {{/showhide}}
16 |
17 | {{code}}
18 | {{showhide showmessage="Show" hidemessage="Hide" style="background-color: #ccc"}}
19 | Here is some hidden content that can become visible
20 | Here is some hidden content that can become visible
21 | Here is some hidden content that can become visible
22 | Here is some hidden content that can become visible
23 | {{/showhide}}
24 | {{/code}}
25 |
26 | == With a fade in effect ==
27 |
28 | {{showhide showmessage="Show" hidemessage="Hide" effect="fade" effectduration="2" style="background-color: #ccc"}}
29 | Here is some hidden content that can become visible
30 | Here is some hidden content that can become visible
31 | Here is some hidden content that can become visible
32 | Here is some hidden content that can become visible
33 | {{/showhide}}
34 |
35 | {{code}}
36 | {{showhide showmessage="Show" hidemessage="Hide" effect="fade" effectduration="2" style="background-color: #ccc"}}
37 | Here is some hidden content that can become visible
38 | Here is some hidden content that can become visible
39 | Here is some hidden content that can become visible
40 | Here is some hidden content that can become visible
41 | {{/showhide}}
42 | {{/code}}
43 |
44 | {{info}}Using ##effect="appear"## is still supported and provide the same behavior{{/info}}
45 |
46 | == With a sliding down effect ==
47 |
48 | {{showhide showmessage="Show" hidemessage="Hide" effect="slide" effectduration="0.5" style="background-color: #ccc"}}
49 | Here is some hidden content that can become visible
50 | Here is some hidden content that can become visible
51 | Here is some hidden content that can become visible
52 | Here is some hidden content that can become visible
53 | {{/showhide}}
54 |
55 | {{code}}
56 | {{showhide showmessage="Show" hidemessage="Hide" effect="slide" effectduration="0.5" style="background-color: #ccc"}}
57 | Here is some hidden content that can become visible
58 | Here is some hidden content that can become visible
59 | Here is some hidden content that can become visible
60 | Here is some hidden content that can become visible
61 | {{/showhide}}
62 | {{/code}}
63 |
64 | {{info}}This effect is equivalent to ##effect="blind"## in the 1.0 macro, so both ##slide## and ##blind## effect are now using the exact same animation.{{/info}}

# Applications

# Tips

You can click on the arrows next to the breadcrumb elements to quickly navigate to sibling and children pages.

# Need help?

If you need help with XWiki you can contact:

- Community Support
- Professional Support