Foldable List

By michal frackowiakmichal frackowiak

Description

Do you like a foldable list from My Account or Site Manager? Create your own!

The trick is to embed the list within the foldable-list-container class div like below. Use your own links within the list!

Code

[[div class="foldable-list-container"]]
* foldable example 
 * [[[system: Recent changes]]]
 * [[[system: List all pages | List all solutions]]]
 * [[[system: Page tags | Browse by tags]]]
 *   and here are some "links" shown: 
 * [*http://www.wikidot.com/doc Documentation]
 * [*http://www.wikidot.com/doc:wiki-syntax wiki-syntax]
 * [*http://community.wikidot.com/howto:howto-list How-To's]
 * [*http://snippets.wikidot.com Solutions]
 * [*http://www.wikidot.com wikidot]
 * [*http://community.wikidot.com/ Community]
 * [*http://community.wikidot.com/forum:start Community Forum]
[[/div]]

In action

See the example on the page below:

NOTE: you can only use this in the side bar element.

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

rating: +181+x
In the content area
MilchFlascheMilchFlasche 1170211936|%e %b %Y, %H:%M %Z|agohover

Can it be made available in the content area too?

unfold In the content area by MilchFlascheMilchFlasche, 1170211936|%e %b %Y, %H:%M %Z|agohover
Re: In the content area
KlausRogallKlausRogall 1184049184|%e %b %Y, %H:%M %Z|agohover

Yes, see collapsible-text-block

unfold Re: In the content area by KlausRogallKlausRogall, 1184049184|%e %b %Y, %H:%M %Z|agohover
Indented/bulleted foldable list
StruveStruve 1196762006|%e %b %Y, %H:%M %Z|agohover

Thank you for this post!
How can I indent the list elements or put bullets in front of them? I'd like to make the unfolded list more visible for visitors.
One idea would be to simply write "-" but it doesn't look very nice.

unfold Indented/bulleted foldable list by StruveStruve, 1196762006|%e %b %Y, %H:%M %Z|agohover
Re: Indented/bulleted foldable list
Eric WaltersEric Walters 1202178059|%e %b %Y, %H:%M %Z|agohover

You could try the alt-code ALT+0149.
It makes a • which could be a good compromise between a dash and something more complicated.

unfold Re: Indented/bulleted foldable list by Eric WaltersEric Walters, 1202178059|%e %b %Y, %H:%M %Z|agohover
ASumowskiASumowski 1201783291|%e %b %Y, %H:%M %Z|agohover

Is it possible to nest the folding? If yes, then how?

unfold by ASumowskiASumowski, 1201783291|%e %b %Y, %H:%M %Z|agohover
eeee
Iuly2freemanIuly2freeman 1202655655|%e %b %Y, %H:%M %Z|agohover
unfold eeee by Iuly2freemanIuly2freeman, 1202655655|%e %b %Y, %H:%M %Z|agohover
Just Can't Get This to Work
OsiraOsira 1213631437|%e %b %Y, %H:%M %Z|agohover

I'm not sure what I'm doing wrong, but I just can't get this to work for me. I've checked my code over for errors and I've made sure all of my links are correct, but it's still giving me trouble. It's disappointing, as this is just what I need to put the finishing touches on my sidebar. If anyone could figure out what I might be doing wrong, that would be greatly appreciated. Here's my code:

[[div class="foldable-list-container"]]
* Help:
* [[[how-to-s|How To's]]]
* [[[templates|Templates]]]
* [[[help|Links]]]
* Site Info:
* [[[system: members |Site Members]]]
* [[[system: recent changes|Recent Changes]]]
* [[[system: list all pages|List All Pages]]]
* [[[system: page tags|List All Tags]]]
[[/div]]

Thanks!

last edited on 1213644981|%e %b %Y, %H:%M %Z|agohover by Osira + show more
unfold Just Can't Get This to Work by OsiraOsira, 1213631437|%e %b %Y, %H:%M %Z|agohover
Re: Just Can't Get This to Work
RobElliottRobElliott 1213797861|%e %b %Y, %H:%M %Z|agohover

It doesn't look like you've indented the lines under Help: and Site Info: so put a couple of spaces before the * on those lines and see if that solves it. Without that you just get a non-folding list.


ad5.png
unfold Re: Just Can't Get This to Work by RobElliottRobElliott, 1213797861|%e %b %Y, %H:%M %Z|agohover
foldable display
wowstrategywowstrategy 1215125089|%e %b %Y, %H:%M %Z|agohover

this is a great tip

i have 2 problems:

1) when the page is refreshed or changes, the foldable list is displayed quickly as unfolded, this causes everything to change position for a second before it folds up again. is there any way to make this not occur? that would be sweet

2) when i look at the side-bar actual page (like, go to list all pages, and click on side bar), the list has bullets in it, but on the sidebar, it doesnt have any bullets. im guessing this is controlled through css, and have been messing around trying to fix it without any luck. any ideas?

Thanks!!

unfold foldable display by wowstrategywowstrategy, 1215125089|%e %b %Y, %H:%M %Z|agohover
Adding Pages
Chirag ChamoliChirag Chamoli 1235830888|%e %b %Y, %H:%M %Z|agohover

Folks, I have searched a lot and not able to add page links to this list. I am really new to the platform and not very technical, can you please help me with this.

* [http://wmui.wikidot.com/editing-wmui Editing]

I want to give a fold-able list of pages in the side bar. Thanks for your time.

unfold Adding Pages by Chirag ChamoliChirag Chamoli, 1235830888|%e %b %Y, %H:%M %Z|agohover
here are some Links inside the collapsible
Helmuti_pdorfHelmuti_pdorf 1235920671|%e %b %Y, %H:%M %Z|agohover

1. I insert here the sopurce code of one of nav:side bar pages ( http://pug-at.wikidot.com/nav:side )
2. I chane the shown example to have a standaard link in the foldable list

[[=]]
[[button edit text="edit" style="background-image: url(http://community.wikidot.com/local--files/nav:side/accessories-text-editor-32x32.png); background-repeat: no-repeat; background-position: bottom right; padding-right: 20px;"]] [[button source text="src" style="background-image: url(http://www.wikidot.com/local--files/files/view-source.png); background-repeat: no-repeat; background-position: bottom right; padding-right: 20px;"]] [[button print text="prt" style="background-image: url(http://www.wikidot.com/local--files/files/document-print.png); background-repeat: no-repeat; background-position: bottom right; padding-right: 20px;"]]
[[/=]]

* [[[start | Welcome page]]]

* [[[forum:start | Forum]]]
* [[[forum:recent-posts | Recent posts]]]
* [*http://pug-at.wikidot.com/forum/c-33548/gaestebuch-offen-fuer-nichtmitglieder Guestbook]
* [[[Link-Liste]]]
* [[[contact]]]
* [[[system: join | Mitglied werden]]]

[[div class="foldable-list-container"]]
* Help 
 * [*http://handbook.wikidot.com Wikidot Handbook]
 * [[[system: join | How to join us?]]]
 * [[[What is a Wiki Site?|What is a Wiki?]]]
 * [[[How to edit pages?]]]
 * [*http://www.wikidot.com/doc Documentation]
 * [*http://www.wikidot.com/doc:wiki-syntax wiki-syntax]
 * [*http://community.wikidot.com/howto:howto-list How-To's]
 * [*http://snippets.wikidot.com Solutions]
 * [*http://www.wikidot.com wikidot]
 * [*http://community.wikidot.com/ Community]
 * [*http://community.wikidot.com/forum:start Community Forum]
[[/div]]

[[div class="foldable-list-container"]]
* Internals 
 * [[[system:members | Site members]]] 
 * [[[system: Recent changes]]]
 * [[[system: List all pages]]]
 * [[[system:page-tags-list|Page Tags]]]
 * [[[admin:manage|Site Manager]]]
 * [[[nav:side | nav:side]]]
 * [[[nav:top | nav:top]]]
[[/div]]
++ Page tags
[[module TagCloud minFontSize="80%" maxFontSize="200%"  maxColor="8,8,64" minColor="100,100,128" target="system:page-tags" limit="30"]]

++ Add a new page
[[module NewPage size="15" button="new page"]]

Hope this helps ?


Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)

Wollen Sie Wikidot helfen im deutschen » Handbuch ?

unfold here are some Links inside the collapsible by Helmuti_pdorfHelmuti_pdorf, 1235920671|%e %b %Y, %H:%M %Z|agohover
Add a new comment
page_revision: 6, last_edited: 1235920826|%e %b %Y, %H:%M %Z (%O ago)
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License