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 .
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by Squark
Teachertube - 06 Jun 2021 03:45
Mp3 and video player - 21 Oct 2016 12:48
Voicethread - 16 Feb 2012 01:51
Vimeo - 16 Feb 2012 01:51
Slideboom - 16 Feb 2012 01:42
Schooltube - 16 Feb 2012 01:40
Reflections - 16 Feb 2012 01:39
Playlist - 16 Feb 2012 01:31
Picasaweb - 16 Feb 2012 01:30
Ohloh - 16 Feb 2012 01:27
Js Kit Ratings - 16 Feb 2012 01:15
Gametrailers - 16 Feb 2012 01:03
Flickr Video - 16 Feb 2012 01:01
Dailymotion - 15 Feb 2012 00:42
Blip TV - 15 Feb 2012 00:26
Rate this solution
If you think this solution is useful — rate it up!
page revision: 2, last edited: 15 Feb 2012 00:33
yoooo it works
[[By CARTOON NETWORK]]
$best$
In Action:
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.
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 | NEW: Wikiroo, backup tool (in development)
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.
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 ?
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).
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"