From ashtarcommunications@gmail.com Thu Sep 20 18:44:45 2012
From: Ashtar Communications <ashtarcommunications@gmail.com>
To: xwiki-users@xwiki.org
Subject: Re: [xwiki-users] Collapsable sections on a wiki-page
Date: Thu, 20 Sep 2012 14:44:42 -0400
Message-ID:
 <CAN11mMGRLm-OhMSYzGvU82jFkxGWrmXFdvwm5WUG+NbEOYvxWg@mail.gmail.com>
In-Reply-To: <1348148531965-7581455.post@n2.nabble.com>
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="===============8574086127123565427=="

--===============8574086127123565427==
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: quoted-printable

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=3D"button" onclick=3D"expandCollapseAll()"
value=3D"Expand&#47;Collapse All" title=3D"Expand&#47;Collapse All"/></br>
{{/html}}

#set($entries =3D $doc.getObjects('XWiki.EntryClass'))

##Start EntryTable
#foreach($entry in $entries)
(% class=3D"title closed" name=3D"title" id=3D"title$entry.getNumber()"
onclick=3D"showHide('title$entry.getNumber()',
'entry$entry.getNumber()'); return false;" %)
=3D$entry.getProperty('Title').getValue()=3D
(% name=3D"entry" id=3D"entry$entry.getNumber()" style=3D"display:none;
width:100%;" %)
$entry.getProperty('Entry').getValue()
#end

{{html}}
<script type=3D"text/javascript">

function showHide(title, div){
    Effect.toggle(div, 'slide');
    var titleelem=3Ddocument.getElementById(title);
    titleelem.classList.toggle('open');
}

function expandCollapseAll(){
    var entries=3Ddocument.getElementsByName('entry');
    var titles=3Ddocument.getElementsByName('title');
    for(var x=3D0; 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 U=
RL.

Best,

aaron


On Thu, Sep 20, 2012 at 9:42 AM, Hamster <teunham(a)hotmail.com> wrote:
> Thanks!
>
> I searched the Extension DB, but not at "Scripatculous fading effects"
> (collapse and expand) :-)
>
> I can use the ShowHideMacro to show extra information, but it "lacks" a few
> features:
> 1) It won't accept any headers (Title1 like "=3D Show More =3D" or Title2 l=
ike
> "=3D=3D Show Less =3D=3D")
> 2) Nested ShowHideMacro's are possible, but they are not acting correctly
> (the nested ShowHideMacro takes the value of the main ShowHideMacro)
>
> But a cool feature nonetheless!!
>
>
>
> --
> View this message in context: http://xwiki.475771.n2.nabble.com/Collapsable=
-sections-on-a-wiki-page-tp7581446p7581455.html
> Sent from the XWiki- Users mailing list archive at Nabble.com.
> _______________________________________________
> users mailing list
> users(a)xwiki.org
> http://lists.xwiki.org/mailman/listinfo/users

--===============8574086127123565427==--