Hi, Have a look at: http://extensions.xwiki.org/xwiki/bin/view/Extension/Ajax+and+Show+Hide+Mac… Note that you can also display panels inside a page: http://extensions.xwiki.org/xwiki/bin/view/Extension/Display+Panel+Layout+M… Br, Jeremie 2012/9/20 Hamster <teunham(a)hotmail.com>om>:

Hamster, I have a similar requirement to show/hide large sections of text. I use some simple javascript and css classes, and it works great for our needs. I'm using it to iterate through a collection of objects on a page, but you could certainly do the same thing without them and just adjust the div names, etc. as needed. A simplified version of the code I'm using is below - you might be able to adapt it. **********START CODE*************** {{velocity}} ##Expand/Collapse Button {{html}} <input type="button" onclick="expandCollapseAll()" value="Expand&#47;Collapse All" title="Expand&#47;Collapse All"/></br> {{/html}} #set($entries = $doc.getObjects('XWiki.EntryClass')) ##Start EntryTable #foreach($entry in $entries) (% class="title closed" name="title" id="title$entry.getNumber()" onclick="showHide('title$entry.getNumber()', 'entry$entry.getNumber()'); return false;" %) =$entry.getProperty('Title').getValue()= (% name="entry" id="entry$entry.getNumber()" style="display:none; width:100%;" %) $entry.getProperty('Entry').getValue() #end {{html}} <script type="text/javascript"> function showHide(title, div){ Effect.toggle(div, 'slide'); var titleelem=document.getElementById(title); titleelem.classList.toggle('open'); } function expandCollapseAll(){ var entries=document.getElementsByName('entry'); var titles=document.getElementsByName('title'); for(var x=0; x < entries.length; x++) { Effect.toggle(entries[x], 'slide'); titles[x].classList.toggle('open'); } } </script> {{/html}} {{/velocity}} **************END CODE***************** The custom CSS classes look like the following: *****************START CSS*********** .closed{background:url(icons/silk/bullet_arrow_down.png) left center no-repeat; padding-left: 25px;} .open{background:url(icons/silk/bullet_arrow_up.png) left center no-repeat; padding-left: 25px;} ****************END CSS***************** Let me know if you'd like to see an example in action and I'll send you the URL. Best, aaron On Thu, Sep 20, 2012 at 9:42 AM, Hamster &lt;teunham(a)hotmail.com&gt; wrote: