Collapsible Text Block

By $michal-frackowiak$ michal-frackowiak

Description

This solutions will show you how to make nice collapsible text blocks. What for? See the examples, you should know.

Code

[[collapsible]]
Some text to show/hide.
[[/collapsible]]

[[collapsible show="+ show me the hidden content" hide="- hide this content"]]
Some text to show/hide.
[[/collapsible]]

[[collapsible hideLocation="both"]]
some
very
very
...
long
text
[[/collapsible]]

In action

+ show block

+ show me the hidden content

+ show block

The options to the block are:

show - text to be shown when folded, e.g. "+ show text"
hide - text to be shown when unfolded, click to fold
hideLocation - location of the text to hide block, values are: top, bottom, both (nice for long blocks)

And now some real examples

Extremely custom menu

Take a look at: http://snippets.wikidot.com/code:collapsible-block-unleashed

Code hiding

The following code is taken from the Wikidot-based web page

+ show HTML code

Quiz

What is the best Wiki platform ever?

show the answer

Multiple Collapsibles

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

Other snippets posted by michal-frackowiak

MyBlogLog recent visitors - 06 Jun 2021 04:03
Include Any Page - 06 Jun 2021 03:20
Babelfish Translation - 06 Jun 2021 03:14
Todo List - 18 Aug 2014 15:28
Multicolumn Layout - 17 Dec 2012 19:51
Zoho Writer - 16 Feb 2012 01:57
Zoho Sheet - 16 Feb 2012 01:56
Zoho Show - 16 Feb 2012 01:55
Zoho Polls - 16 Feb 2012 01:53
WoW Tooltips - 16 Feb 2012 01:52
Widgetbox Panel - 16 Feb 2012 01:52
Video from Revver - 16 Feb 2012 01:50
Tabs - 16 Feb 2012 01:45
Standalone Page Buttons - 16 Feb 2012 01:44
Social Bookmarking - 16 Feb 2012 01:42
Simple Gallery - 16 Feb 2012 01:41
Remember The Milk Todo - 16 Feb 2012 01:39
Recent Changes (mini) - 16 Feb 2012 01:36
Rating Summary - 16 Feb 2012 01:35
Quimble Poll - 16 Feb 2012 01:33
Quikmaps Maps - 16 Feb 2012 01:33
Photobucket Widget - 16 Feb 2012 01:29
Page Previews (Snap.com) - 16 Feb 2012 01:29
Pabpixies Gadgets - 16 Feb 2012 01:28
Meebo me - 16 Feb 2012 01:20
Layout With Tables - 16 Feb 2012 01:19
Instacalc - 16 Feb 2012 01:12
Import the Digg Feed - 16 Feb 2012 01:11
Import a News Feed - 16 Feb 2012 01:10
Google Gadgets - 16 Feb 2012 01:05
Gabbly chat - 16 Feb 2012 01:02
Forum Summary for the Front Page - 16 Feb 2012 01:02
Footnotes - 16 Feb 2012 01:01
Foldable List - 16 Feb 2012 01:01
Flickr Images By Tags - 16 Feb 2012 01:00
Feedburner - 15 Feb 2012 00:53
Extra Side Bar - 15 Feb 2012 00:51
Embed Code From Other Services - 15 Feb 2012 00:50
EditGrid Spreadsheets - 15 Feb 2012 00:49
Cornify - 15 Feb 2012 00:39
Compact Feed Display - 15 Feb 2012 00:35
Center Video - 15 Feb 2012 00:28
Bibliography/Footnotes/Comments Listed in TOC - 15 Feb 2012 00:26
Automatic Sitemap - 15 Feb 2012 00:25
Alexa traffic ratings - 15 Feb 2012 00:23
3d tagcloud - 15 Feb 2012 00:22

Rate this solution

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

Add a New Comment

Hide All Comments Unfold All Fold All

Fold

Really useful

NUKER13764 18 Feb 2021 15:34

Thank you great job helped me out.

Ramon Brown

Reply Options

Unfold Really useful by

NUKER13764, 18 Feb 2021 15:34

Fold

Detes Tit 01 Jun 2020 22:43

This is really neat. Nice workNo really, this is great!!
HTML rendering:
This is really neat. <span class="hover" style="">Nice work<span style="">No really, this is great!</span></span>!

Reply Options

Unfold by

Detes Tit, 01 Jun 2020 22:43

Fold

Thanks

Biomatrix 02 May 2020 23:06

Fantastic, I appreciate the work.

Reply Options

Unfold Thanks by

Biomatrix, 02 May 2020 23:06

Fold

Senior_Researcher_C 06 Nov 2018 23:09

What if I want to the name of it to 'access file 5243578435-B' You get the idea, how would I change the name of it?

Reply Options

Unfold by

Senior_Researcher_C, 06 Nov 2018 23:09

Fold

Bold text ?

nikdek69 23 Oct 2018 10:40

I'd like to put in bold the show / hide text, but can't find the correct synatx…

Reply Options

Unfold Bold text ? by

nikdek69, 23 Oct 2018 10:40

Fold

Re: Bold text ?

Helmut_pdorf 23 Oct 2018 16:17

try it with a local moduile CSS - overwriting the style of the "element div.collapsible-.block-folded"
with style="font-weight: bold;" :

I have a test-page with this local module CSS ( found out the div.class "collapsible-block-folded" with firefox web-developer tool inspector ( menu) on my test wiki:
https://helmuti-pdorf.wikidot.com/collapsible-block-css

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 ?

Reply Options

Unfold Re: Bold text ? by

Helmut_pdorf, 23 Oct 2018 16:17

Fold

Colors?

Jennkryst 04 Sep 2017 14:11

Is there any way to change the color of the collapsible?

Reply Options

Unfold Colors? by

Jennkryst, 04 Sep 2017 14:11

Fold

Re: Colors?

Helmut_pdorf 04 Sep 2017 15:19

I have only the special style settings on http://snippets.wikidot.com/code:collapsible-block-unleashed

The "collapsible" line itself I have seen somewhere, but I think this is not so easy to sovle
Perhaps the old guide from div style settings does help you?

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 ?

Reply Options

Unfold Re: Colors? by

Helmut_pdorf, 04 Sep 2017 15:19

Fold

Help!

Joshua Darby 09 Oct 2016 23:54

When I was making a tutorial on how to make a Personal Sandbox Template, I used this snippet to make the page shorter due to having code on the page too. Well I have come to problem when trying to list my latest post on my category start page.

I get this error:

First you need to create a template category called sandbox:_template. By doing this it will be default layout of the category. When you create the page insert the following content.

[[collapsible]]

[[module CSS]]
@import url(%%form_raw{base}%%);
%%form_raw{css}%%

.show1{    display: none !important; }
.hide1{    display: block !important; }

.form-row.row-4,
.form-row.row-5,
.form-row.row-6,
.form-row.row-7,
.form-row.row-8,
.form-row.row-9{    max-height: %%form_data{advanced}%%000px; }
[[/module]]

Well if you look on my site it will show the start tag for this snippet and the un-collapsed content.
How do I fix this so the start tag and the un-collapsed content don't show?
My site is http://download-source.ml/

Joshua Darby
Wikidot Support Mentor | Icon Deposit Profile

Reply Options

Unfold Help! by

Joshua Darby, 09 Oct 2016 23:54

Fold

Re: Help!

Helmut_pdorf 10 Oct 2016 14:38

I cannot seethe collapsible block , wether on the sandbox template nor on your site..?
I found it:
http://download-source.ml/download:personal-sandbox-template-wikidot

Not sure why this is happening , need some time toi contrrol…

at the first look I think the "include text" (includes are always expanded in "code" blocks!) is making the text so long..
if you do not wish this you should insert a space before the "include text" line - shifting the include one character to the right.

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 ?

Last edited on 10 Oct 2016 14:48 by Helmut_pdorf Show more

Reply Options

Unfold Re: Help! by

Helmut_pdorf, 10 Oct 2016 14:38

Fold

olezo7 17 Nov 2011 12:18

I would like to encourage EFL teachers to participate in this page and share ideas.

Reply Options

Unfold by

olezo7, 17 Nov 2011 12:18

Fold

In line collapsible text or pop-up?

leightonlc 27 May 2011 18:22

Is there a why to get the collapsible text block to appear in line with the text?

What I code is:

From Bridget's small log [[collapsible show="+ crib" hide="- crib"]]
An eight-by-ten-cabin
where prostitutes lived
and entertained
customers.
[[/collapsible]]
with her one window, two quilts,
and hard pine bed,
it is 64 steps up to the old well,
the one that dried out

and what I get is;
From Bridget's small log

+ crib

with her one window, two quilts,
and hard pine bed,
it is 64 steps up to the old well,
the one that dried out

What I would prefer to have it look like is

From Bridget's small log +crib
An eight-by-ten-cabin
where prostitutes lived
and entertained
customers.
with her one window, two quilts,
and hard pine bed,
it is 64 steps up to the old well,
the one that dried out

Any ideas?
Thanks.

Reply Options

Unfold In line collapsible text or pop-up? by

leightonlc, 27 May 2011 18:22

Fold

Love this option

nishman686 07 Mar 2010 14:46

thanks - M

Reply Options

Unfold Love this option by

nishman686, 07 Mar 2010 14:46

Fold

Re: Love this option

formationcanva 24 Jan 2023 09:51

thanks !!

Reply Options

Unfold Re: Love this option by

formationcanva, 24 Jan 2023 09:51

page revision: 10, last edited: 02 Dec 2020 10:24

Edit Rate (+344) Tags Discuss (40) History Files Print Site tools + Options

Wikidot Code Snippets

Snippets

Description

Code

In action

And now some real examples

Extremely custom menu

Code hiding

Quiz

Multiple Collapsibles

Rate this solution