Collapsible Block Unleashed
By 
Squark
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 .
1257616619|%e %b, %H:%M|agohover @nebraha A tak w zasadzie czemu cały czas piszemy po angielsku? :)
1257607093|%e %b, %H:%M|agohover @nebraha I don't believe we go to the same places nevertheless, but maybe - who knows :)
1257606235|%e %b, %H:%M|agohover @squark *sometimes something
Rate this solution
If you think this solution is useful — rate it up! Or dump it otherwise.
page_revision: 1, last_edited: 1222419700|%e %b %Y, %H:%M %Z (%O ago)
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"
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, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
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).
Wikidot Team