Collapsible Block Unleashed

Description

With the collapsible block you can create VERY custom menu on your site. It is not very easy to do it, but with a bit of effort it's eatable.
I had to change my CSS style a bit to make it works (change margins of <ul> lists for example), but it can be done by adding 12px padding in the internal DIV (because bullet list has 12px margin by default).

If you know CSS styles a bit, you will be able to do such menus or even better!

Code

[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼ posts by date " hide=" ▼ posts by date "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module PageCalendar category="blog" targetPage="start"]]
[[/div]]
[[/collapsible]]
[[/div]]
[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼ my current status " hide=" ▼ my current status " folded="no"]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module Feed src="http://twitter.com/statuses/user_timeline/16363190.rss" limit="3"]]
[[div]]
[[div style="width:278; height: 34px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/cloud_1.png); margin: 0; padding: 0;"]]
[[/div]]
[[div style="width:278; background-image: url(http://squark.wdfiles.com/local--files/dev:1/cloud_2.png); margin:0; padding: 10px 30px;"]]
[[div style="background-color: #444; line-height: 12px;"]]
[[size smaller]]%%date|%e %b, %H:%M|agohover%%[[/size]]%%description:";squark:;":"":";http://([^ ]+);":"<a href="${0}">${1}</a>"%%
[[/div]]
[[/div]]
[[div style="width:278; height: 73px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/cloud_3.png); margin:0; padding: 0;"]]
[[/div]]
[[/div]]
[[/module]]
[[/div]]
[[/collapsible]]
[[/div]]
[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼ recently listened " hide=" ▼ recently listened "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module Feed src="http://ws.audioscrobbler.com/1.0/user/squark/recenttracks.rss" limit="10"]]
[[div style="line-height: 12px;"]]
[[size small]]%%custom title%%[[/size]]
[[size x-small]]##gray|%%custom pubDate%%##[[/size]]
[[/div]]
[[/module]]
**[*http://www.lastfm.pl/user/squark visit my last.fm profile >>]**
[[/div]]
[[/collapsible]]
[[/div]]
[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼ wikidot team status " hide=" ▼ wikidot team status "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module Feed src="http://twitter.com/statuses/user_timeline/6130662.rss" limit="3"]]
[[div]]
[[div style="width:278; height: 34px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/cloud_1.png); margin: 0; padding: 0;"]]
[[/div]]
[[div style="width:278; background-image: url(http://squark.wdfiles.com/local--files/dev:1/cloud_2.png); margin:0; padding: 10px 30px;"]]
[[div style="background-color: #444; line-height: 12px;"]]
[[size smaller]]%%date|%e %b, %H:%M|agohover%%[[/size]]
%%description:";squark:;":"":";http://([^ ]+);":"<a href="${0}">${1}</a>"%%
[[/div]]
[[/div]]
[[div style="width:278; height: 73px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/cloud_3.png); margin:0; padding: 0;"]]
[[/div]]
[[/div]]
[[/module]]
[[/div]]
[[/collapsible]]
[[/div]]
[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼ posts by tags " hide=" ▼ posts by tags "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module TagCloud minFontSize="1em" maxFontSize="2em" maxColor="187,228,255" minColor="35,110,145" category="blog" target="blog:_start"]]
[[/div]]
[[/collapsible]]
[[/div]]
[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼ Michal's latest posts " hide=" ▼ Michal's latest posts "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module Feed src="http://michalfrackowiak.com/feed/pages/category/blog/t/Michal+Frackowiak%27s+blog" limit="5"]]
[[div style="line-height: 12px;"]]
**%%linked_title%%**
[[size x-small]]%%date%%[[/size]]
[[/div]]
[[/module]]
[[/div]]
[[/collapsible]]
[[/div]]
[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼ Gabrys latest posts " hide=" ▼ Gabry's latest posts "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[module Feed src="http://piotr.gabryjeluk.pl/feed/pages/category/dev/t/Piotr+Gabryjeluk+dev+blog" limit="5"]]
[[div style="line-height: 12px;"]]
**%%linked_title%%**
[[size x-small]]%%date%%[[/size]]
[[/div]]
[[/module]]
[[/div]]
[[/collapsible]]
[[/div]]

In action

I'm sorry about different colours — different CSS style. You can look at the fully working example at my page: http://www.squark.pl .

The requested categories do not (yet) exist.

{"module":"feed\/FeedModule","params":{"src":"http:\/\/twitter.com\/statuses\/user_timeline\/16363190.rss","limit":"3","module_body":"[[div]]\n[[div style=\"width:278; height: 34px; background-image: url(http:\/\/squark.wdfiles.com\/local--files\/dev:1\/cloud_1.png); margin: 0; padding: 0;\"]]\n[[\/div]]\n[[div style=\"width:278; background-image: url(http:\/\/squark.wdfiles.com\/local--files\/dev:1\/cloud_2.png); margin:0; padding: 10px 30px;\"]]\n[[div style=\"background-color: #444; line-height: 12px;\"]]\n[[size smaller]]%%date|%e %b, %H:%M|agohover%%[[\/size]]%%description:\";squark:;\":\"\":\";http:\/\/([^ ]+);\":\"<a href=\"${0}\">${1}<\/a>\"%%\n[[\/div]]\n[[\/div]]\n[[div style=\"width:278; height: 73px; background-image: url(http:\/\/squark.wdfiles.com\/local--files\/dev:1\/cloud_3.png); margin:0; padding: 0;\"]]\n[[\/div]]\n[[\/div]]"}}

{"module":"feed\/FeedModule","params":{"src":"http:\/\/ws.audioscrobbler.com\/1.0\/user\/squark\/recenttracks.rss","limit":"10","module_body":"[[div style=\"line-height: 12px;\"]]\n[[size small]]%%custom title%%[[\/size]]\n[[size x-small]]##gray|%%custom pubDate%%##[[\/size]]\n[[\/div]]"}}

visit my last.fm profile >>

{"module":"feed\/FeedModule","params":{"src":"http:\/\/twitter.com\/statuses\/user_timeline\/6130662.rss","limit":"3","module_body":"[[div]]\n[[div style=\"width:278; height: 34px; background-image: url(http:\/\/squark.wdfiles.com\/local--files\/dev:1\/cloud_1.png); margin: 0; padding: 0;\"]]\n[[\/div]]\n[[div style=\"width:278; background-image: url(http:\/\/squark.wdfiles.com\/local--files\/dev:1\/cloud_2.png); margin:0; padding: 10px 30px;\"]]\n[[div style=\"background-color: #444; line-height: 12px;\"]]\n[[size smaller]]%%date|%e %b, %H:%M|agohover%%[[\/size]]\n%%description:\";squark:;\":\"\":\";http:\/\/([^ ]+);\":\"<a href=\"${0}\">${1}<\/a>\"%%\n[[\/div]]\n[[\/div]]\n[[div style=\"width:278; height: 73px; background-image: url(http:\/\/squark.wdfiles.com\/local--files\/dev:1\/cloud_3.png); margin:0; padding: 0;\"]]\n[[\/div]]\n[[\/div]]"}}

Category "blog" can not be found.

{"module":"feed\/FeedModule","params":{"src":"http:\/\/michalfrackowiak.com\/feed\/pages\/category\/blog\/t\/Michal+Frackowiak%27s+blog","limit":"5","module_body":"[[div style=\"line-height: 12px;\"]]\n**%%linked_title%%**\n[[size x-small]]%%date%%[[\/size]]\n[[\/div]]"}}

{"module":"feed\/FeedModule","params":{"src":"http:\/\/piotr.gabryjeluk.pl\/feed\/pages\/category\/dev\/t\/Piotr+Gabryjeluk+dev+blog","limit":"5","module_body":"[[div style=\"line-height: 12px;\"]]\n**%%linked_title%%**\n[[size x-small]]%%date%%[[\/size]]\n[[\/div]]"}}

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

Rate this solution

If you think this solution is useful — rate it up!

rating: +54

Test

Sir David Tee Sir David Tee 27 Apr 2025 22:29

Your code is our code

Your code is Our code.

Your%20code%20is%20Our%20code%21

by Sir David Tee Sir David Tee , 27 Apr 2025 22:29

Maria_Gold Maria_Gold 03 Jan 2023 09:56

Whatever text to show/hide.

by Maria_Gold Maria_Gold , 03 Jan 2023 09:56

Maria_Gold Maria_Gold 03 Jan 2023 09:56

yoooo it works

by Maria_Gold Maria_Gold , 03 Jan 2023 09:56

Mister-Mblack Dom Mister-Mblack Dom 25 Dec 2022 15:08

[[By CARTOON NETWORK]]

by Mister-Mblack Dom Mister-Mblack Dom , 25 Dec 2022 15:08

Mister-Mblack Dom Mister-Mblack Dom 25 Dec 2022 15:05

$best$

by Mister-Mblack Dom Mister-Mblack Dom , 25 Dec 2022 15:05

(account deleted) 17 Nov 2022 13:02

Whatever text to show/hide.

by (account deleted), 17 Nov 2022 13:02

UnknownUpload123 UnknownUpload123 09 Dec 2020 10:03

[[div style="margin: 0; padding: 0; width: 300px; background-image: url(http://squark.wdfiles.com/local--files/dev:1/menu_bg.png); background-repeat: repeat-x; line-height: 26px;"]]
[[collapsible show=" ▼ Game Open " hide=" ▲さんかく Game Closed "]]
[[div style="background-color: #222222; border-left: 1px solid #777; border-right: 1px solid #777; border-bottom: 1px solid #777; margin: 0; padding: 10px;"]]
[[iframe https://shootup.io/ frameborder="0" scrolling="no" height="400px" width="600px"]]
[[/div]]
[[/collapsible]]
[[/div]]

In Action:

[フレーム]

Last edited on 29 Mar 2023 15:38 by Helmut_pdorf

by UnknownUpload123 UnknownUpload123 , 09 Dec 2020 10:03

Excuse me I wanna ask something

Greenson Greenson 28 Dec 2016 01:54

As there's someone want to make a secondary collapsible block within an existed collapsible block, but he didn't know how to use CSS to achieve it and the default collapsible block just do not function.
Do you have any ideas about that?
Whether or not, thank you anyway.

by Greenson Greenson , 28 Dec 2016 01:54

Re: Excuse me I wanna ask something

leiger leiger 28 Dec 2016 12:47

Hello Greenson,

As you said I don't think the built-in collapsible blocks don't support nesting (one inside another).

I recall someone found a workaround to make it work, but I'm not sure where I saw that. It was a very long time ago.

There may be a way to adapt something found elsewhere online to Wikidot syntax, and make it work. As long as it relies on CSS, it should be possible to do. With a bootstrap theme / layout, jQuery solutions may also work.

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

by leiger leiger , 28 Dec 2016 12:47

Re: Excuse me I wanna ask something

Greenson Greenson 30 Dec 2016 13:21

Thank you very much.
As I talk with someone who wants to work out some different effects in his SCP Document, he doesn't know how to apply CSS Format or else, so do I. We have to find another solution for that. We tried to copy some HTML format from other author in SCP-CN site. But thank you for your reply anyway.
Wish you a happy new year.

by Greenson Greenson , 30 Dec 2016 13:21

How is the second collaps. Block made UNFOLDED ??

Helmut_pdorf Helmut_pdorf 27 Sep 2008 13:04

Hi Squark!

Thanks to Phil's question!
I needed some time to understand, that the second block is UNFOLDED from the beginning!

How have you done this?

Edit: i found it now (after the third try..) attribute folded="no" !!

Someone have changed the documentation.. and now we have to link to the http://www.wikidot.com/doc:wiki-syntax#toc16 (=Collapsible block)

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

by Helmut_pdorf Helmut_pdorf , 27 Sep 2008 13:04

Re: How is the second collaps. Block made UNFOLDED ??

Squark Squark 29 Sep 2008 08:38

I missed this function (folded="yes/no") and I asked guys to add it. Also collapsible can be formatted as now in my snippet, you can make a div of collapsible and insert another divs inside. Because it is a major change and it gives great possibilities within creating functional and eye candy pages, I added collapsible to the documentation (screwing it a little bit unfortunately, sorry for that, but now it's ok).

by Squark Squark , 29 Sep 2008 08:38

oh goody goody!!

Phil Chett Phil Chett 26 Sep 2008 09:38

I dont seem to be able to find this anywhere, but there has been a really major addition to this. I had to delve into the code to find it. It makes the collapsible block so much better.

folded="no"

by Phil Chett Phil Chett , 26 Sep 2008 09:38

page revision: 2, last edited: 15 Feb 2012 00:33

Discuss (13)

Wikidot Code Snippets

Snippets

Description

Code

In action

Rate this solution