By michal frackowiak
Description
This solutions will show you how to make nice collapsible text blocks. What for? See the examples, you should know.
Code
[[collapsible]]
Some text to show/hide.
[[/collapsible]]
[[collapsible show="+ show me the hidden content" hide="- hide this content"]]
Some text to show/hide.
[[/collapsible]]
[[collapsible hideLocation="both"]]
some
very
very
...
long
text
[[/collapsible]]
In action
The options to the block are:
- show - text to be shown when folded, e.g. "+ show text"
- hide - text to be shown when unfolded, click to fold
- hideLocation - location of the text to hide block, values are: top, bottom, both (nice for long blocks)
And now some real examples
Extremely custom menu
Take a look at: http://snippets.wikidot.com/code:collapsible-block-unleashed
Code hiding
The following code is taken from the Wikidot-based web page
Quiz
What is the best Wiki platform ever?
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by michal frackowiak
Zoho Writer - 16 Feb 2012 01:57
Zoho Sheet - 16 Feb 2012 01:56
Zoho Show - 16 Feb 2012 01:55
Zoho Polls - 16 Feb 2012 01:53
WoW Tooltips - 16 Feb 2012 01:52
Widgetbox Panel - 16 Feb 2012 01:52
Video from Revver - 16 Feb 2012 01:50
Todo List - 16 Feb 2012 01:48
Tabs - 16 Feb 2012 01:45
Standalone Page Buttons - 16 Feb 2012 01:44
Social Bookmarking - 16 Feb 2012 01:42
Simple Gallery - 16 Feb 2012 01:41
Remember The Milk Todo - 16 Feb 2012 01:39
Recent Changes (mini) - 16 Feb 2012 01:36
Rating Summary - 16 Feb 2012 01:35
Quimble Poll - 16 Feb 2012 01:33
Quikmaps Maps - 16 Feb 2012 01:33
Photobucket Widget - 16 Feb 2012 01:29
Page Previews (Snap.com) - 16 Feb 2012 01:29
Pabpixies Gadgets - 16 Feb 2012 01:28
Rate this solution
If you think this solution is useful — rate it up!
When the folded text is another code snippet, it just show the whole code snippet on the browser.
It works with a YouTube video… It could prove useful in other ways, too! Links, etc..
Is there a way to format the show/hide text with things like bold, underline, etc…?
I need this right now. I have a widget that appears in many pages in which I just added collapsing. It looks terrible because it shows/hides a list of links. The collapse label looks just like any other link. Also there are spacing issues because the content of the {[collapsible]} tag is a ListPages module.
Jay Bienvenu | Personal wiki | Hilinqwo: A constructed language | Real-Time Topics
Ah! This could be exactly what I need! I want to make a collapsible list to help keep things kind of slimmed down. I'll fiddle around with this a bit, but does anyone already know if I can use code like this and have the bullets to the side still display properly?
How do you get it to work in the side-nav, as in this page. Using just the examples here doesn't seem to work
You want the foldable list page.
And what if I don't want a list?
It worked on my site when I tried it.
I copy/pasted the code from the box to the NAV:SIDE edit page. It showed up on the bottom of my side bar and the clicks worked just like they do in the demo above.
Wish everything had been that easy lol
This is important and it is for the designer of collapsible and it is an easy fix, please please please allow N as an additional parameter to pass in [[collapsible]], so that is be used like this:
collapsible-block-N-folded
in the "javascript—> onclick.
Why? Because that would allow to structure the site, sine that N is per site.
So at least having N be user-named would allow that not all the previous N would be re-set, as is the current case.
It is critical for designing the site if using collapsible site-wide like in http://iswith.wikidot.com, then collapsible can really improve designing and modularizing the site, so that wikidot would earn more content and more users, [[collapsible]] is really cool, (if you as like facebook for instance).
More-ever, if javescipt is disable, then the site still must function, in which case when clicking, then you are sent to the page collapsible-block-N-folded because of this line:
<a href="javascript:;" onclick="$('collapsible-block-N-folded').style.display='none';$('collapsible-block-N-unfolded').style.display='block';">
and so i use [[include collapsible-block-N-folded]]
so it make all be modular and nice, but
but, but, but
then N is changed and the all naming are changed !!!!!!!!!
so, please please please
let the N be passed in [[collapsible]]
thanks .
99occupy
hi, so here is a solution working in http://iswith.wikidot.com , but only when javascript is enabled, so it is only an almost solution :(, but here it is as i use it, enjoy using it, (let me know if you like and btw it loads the first page preaty fast and then no page-loading is required, thus performances of wikidot may be improved)
note: i do not know how to show the code here, so if some one can help on that, the other could benefit!
in the including page, wherein my_n goes ++ from 0, per each calling to [[collapsible…, put:
[[include this N=my_n | MSG=my_msg | page=my_included_page]]
in the this page put:
in the collapsible-block-{$N}-folded page, put:
[[include {$page} N={$N}]]
and last line in the included page of which parent is my_first_page, put
[http://iswith.wikidot.com/my_first_page#{$N} @bring back@]
99occupy
I want to make the codesnippet for the page tags in the side-nav collapsible..
Does anyone know how to?
It would be very nice to add another param, which specifies whether the collapsible text is shown or hidden by default.
Yes That would be really nice. It would be nice if that function allready existed. Seams very obviouse to me
For me also it would be very nice if a parameter is implemented, which allows me to show (in my case preferred) or hide the colapsible items. It also would be nice, if I can use something like in the comments module "hide all | unfold all | fold all".
Thank you
Cord
+1
Doesn't work in the nav-bar…
it doesn't work in the nav-bar
Kenny Depaepe
1BaTPA
KATHO
It works fine in the side bar (nav:side) fine, however for the top-bar, you would need to know a bit of CSS to get it working.
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
Is there a possibility to have a whole tree with expandable-on-click or foldable nodes, or does each foldable section have to be declared explicitly?