ShowHideDIVSnippet

Show Hide DI V Snippet

This snippet takes advantage of existing JavaScript within XWiki in order to let you show/hide a DIV element on a page. You can decide to keep the DIV hidden when the page loads and show it when a button is clicked or alternatively show the DIV when the page loads and hide it when clicked. It uses the toggleClass function originally used to show/hide attachments.

If you want to hide the DIV when page loads just set its class as 'hidden', otherwise leave it blank.

Code

<div id="DIV ID" class="">
This Box will be hidden if you click on the box below!
</div>

<div onclick="toggleClass($('DIV ID'), 'hidden')">
Show/Hide the box!
</div>

Or alternatively the following one to keep the box hidden when page loads:

<div id="DIV ID" class="hidden">
This Box will be hidden if you click on the box below !
</div>

<div onclick="toggleClass($('DIV ID'), 'hidden')">
Show/Hide the box!
</div>

Result