Foldable List

By michal 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.

In the content area

MilchFlasche 1170211936|%e %b %Y, %H:%M %Z|agohover

Can it be made available in the content area too?

Re: In the content area

KlausRogall 1184049184|%e %b %Y, %H:%M %Z|agohover

Yes, see collapsible-text-block

Indented/bulleted foldable list

Struve 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.

Re: Indented/bulleted foldable list

Eric 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.

ASumowski 1201783291|%e %b %Y, %H:%M %Z|agohover

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

eeee

Iuly2freeman 1202655655|%e %b %Y, %H:%M %Z|agohover

• foldable example
  • Recent changes
  • List all solutions
  • Browse by tags

Just Can't Get This to Work

Osira 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

Re: Just Can't Get This to Work

RobElliott 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.

---

foldable display

wowstrategy 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!!

Adding Pages

Chirag 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.

here are some Links inside the collapsible

Helmuti_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 ?