Version 3.1 by Jerome on 2010/12/06 12:59

cog
TypeSnippet
Category
Developed byUnknown
Rating
0 Votes
LicenseUnknown

Table of contents

Description

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

Box Shown when page loads

Box Hidden when page loads

This Box will be hidden if you click on the box below !

Show/Hide the box above !

Show/Hide the box above !

     

Get Connected