Collapsible Text Block
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
Code hiding
The following code is taken from the Wikidot-based web page
Quiz
What is the best Wiki platform ever?
Rate this solution
If you think this solution is useful — rate it up! Or dump it otherwise.
page_revision: 6, last_edited: 1217319147|%e %b %Y, %H:%M %Z (%O ago)
Comments
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…?
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?
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 .
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@]
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…
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?
Fantastic! I just tried this out with footnotes, and it works great. The notes are still viewable upon rollover, but the page stays nice and short. A very nice solution! Thanks!
A few "feature requests": Nested collapsable blocks, and formatting for the show/hide, ie making the Show/Hide headers or whatnot…
Would make my plan easier…multi-level TOC based headers which each section/subsection containing it's own collapsable block using the title of the section as the show/hide text.