# Changes for page 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
From empty
To version 1.1
edited by Helge Dahl
on 2018/01/22 10:41
Change comment: Install extension [org.xwiki.contrib.showhide:showhide-macro/2.0]

## Summary

- Page properties (5 modified, 0 added, 0 removed)
- Objects (0 modified, 8 added, 0 removed)
  - XWiki.JavaScriptExtension[0]
  - XWiki.WikiMacroClass[0]
  - XWiki.WikiMacroParameterClass[0]
  - XWiki.WikiMacroParameterClass[1]
  - XWiki.WikiMacroParameterClass[2]
  - XWiki.WikiMacroParameterClass[3]
  - XWiki.WikiMacroParameterClass[5]
  - XWiki.WikiMacroParameterClass[6]

## Details

Page properties
  Title

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Show Hide Macro

  Parent

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Macros.WebHome

  Author

    ... | ... | @@ -1,1 +1,1 @@
    1 |  | -XWiki.XWikiGuest
    | 1 | +xwiki:XWiki.hde

  Syntax

    ... | ... | @@ -1,1 +1,1 @@
    1 |  | -XWiki 2.1
    | 1 | +XWiki 2.0

  Content

    ... | ... | @@ -1,0 +1,65 @@
    | 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}}
    | 65 | +

XWiki.JavaScriptExtension[0]
  Caching policy

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +long

  Code

    ... | ... | @@ -1,0 +1,16 @@
    | 1 | +require(['jquery'], function($) {
    | 2 | + function onClick () {
    | 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';
    | 8 | + data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible'));
    | 9 | + button.html(button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message'));
    | 10 | + content.stop()[effect](parseInt(button.attr('data-show-duration')));
    | 11 | + return false;
    | 12 | + }
    | 13 | + $(document).ready(function() {
    | 14 | + $('.showhidebutton').children('a').click(onClick);
    | 15 | + });
    | 16 | +});

  Parse content

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +No

  Use this extension

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +onDemand

XWiki.WikiMacroClass[0]
  Macro code

    ... | ... | @@ -1,0 +1,32 @@
    | 1 | +{{velocity}}
    | 2 | +$xwiki.jsx.use("Macros.ShowHideMacro")
    | 3 | +#set($mparams = $xcontext.macro.params)
    | 4 | +#if($mparams.id)
    | 5 | + #set($id = $util.convertToAlphaNumeric($mparams.id))
    | 6 | +#end
    | 7 | +#set($showmessage = $escapetool.xml($mparams.showmessage))
    | 8 | +#set($hidemessage = $escapetool.xml($mparams.hidemessage))
    | 9 | +#set($divstyle = $escapetool.xml($mparams.style))
    | 10 | +#set($effect = $escapetool.xml($mparams.effect))
    | 11 | +#if($effect == "appear" || $effect == "fade")
    | 12 | + #set($effect = "fadeToggle")
    | 13 | +#elseif ($effect == "blind" || $effect == "slide")
    | 14 | + #set($effect = "slideToggle")
    | 15 | +#end
    | 16 | +#set($effectduration = $mathtool.mul(1000,$mparams.effectduration))
    | 17 | +(% #if($divstyle && $divstyle!="") style="${divstyle}" #end %)
    | 18 | +(((
    | 19 | +(% class="showhidebutton" %)
    | 20 | +(((
    | 21 | +{{html clean=false}}
    | 22 | +<a href="javascript:void(0)" #if($id && $id!="")id="showhidebuttontext${id}" #end data-show-duration="$effectduration" data-show-effect="$effect" data-show-message="$showmessage" data-hide-message="$hidemessage">$mparams.showmessage</a>
    | 23 | +{{/html}}
    | 24 | +)))
    | 25 | +(% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end style="display: none;" %)
    | 26 | +(((
    | 27 | +(((
    | 28 | +$context.macro.content
    | 29 | +)))
    | 30 | +)))
    | 31 | +)))
    | 32 | +{{/velocity}}

  Macro content type

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Optional

  Default category

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +content

  Macro description

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Show Hide Macro

  Macro id

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +showhide

  Macro name

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +showhide

  Supports inline mode

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Yes

  Macro visibility

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Current Wiki

XWiki.WikiMacroParameterClass[0]
  Parameter default value

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Show !

  Parameter description

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Show Message

  Parameter mandatory

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +No

  Parameter name

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +showmessage

XWiki.WikiMacroParameterClass[1]
  Parameter default value

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Hide !

  Parameter description

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Hide Message

  Parameter name

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +hidemessage

XWiki.WikiMacroParameterClass[2]
  Parameter description

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +id

  Parameter mandatory

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +No

  Parameter name

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +id

XWiki.WikiMacroParameterClass[3]
  Parameter default value

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +toggle

  Parameter description

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Scriptaculous Effect

  Parameter mandatory

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +No

  Parameter name

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +effect

XWiki.WikiMacroParameterClass[5]
  Parameter default value

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +0

  Parameter description

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Effect duration

  Parameter mandatory

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +No

  Parameter name

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +effectduration

XWiki.WikiMacroParameterClass[6]
  Parameter description

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +DIV style

  Parameter mandatory

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +No

  Parameter name

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +style

# Applications

# Tips

If you're starting with XWiki, check out the Getting Started Guide.

# Need help?

If you need help with XWiki you can contact:

- Community Support
- Professional Support