format collapsible block heading?
Can you think of a way to format the heading for a collapsible block? With mine, the bold tags won't parse.
format collapsible block heading?
Forum
» Help / Editing pages
» format collapsible block heading?
You can use the [[size xxx%]] ... [[/size]] to mimic a H1, H2, etc.
[[size 150%]][[collapsible show="Show This Block" hide="Hide This Block"]][[/size]]
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
[[/collapsible]]
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
The down side is it won't appear in a TOC if you're looking to do that.
-Ed
[edit] I didn't read your original post correctly. I thought you wanted to apply a header font to the collapsible block. You could apply your custom styles via CSS.
.collapsible-block-link is the one you're looking for, I think. Something like this would make it stand out:
.collapsible-block-link {
font-weight: bold;
font-size: 125%;
}
You can apply the CSS using a custom theme or inline with [[span style="..."]] like this:
[[span style="font-size: 150%; font-weight: bold; font-style: italic;"]][[collapsible show="Show This Block" hide="Hide This Block"]][[/span]]
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
[[/collapsible]]
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
Thanks Ed. The span works fine. I don't understand why that behaves differently than the wiki tags — must have something to do with the order in which different elements are parsed. You make it look easy.
hello guys
Is there any chance I can get step by step tutorial on how to create a collapsible text block?
Thanks Zak
http://snippets.wikidot.com/code:collapsible-text-block does not help`?
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 ?
Try this:
If you can see this, it's because you clicked the 'Show this text' link!
which is:
[[collapsible show="+ Show this text" hide="- Hide this text"]]
If you can see this, it's because you clicked the 'Show this text' link!
[[/collapsible]]
I've been using collapsible blocks forever and never figured out how to add formatting to it. I just googled it this morning and ended up on this page - thank you! Ed, I copy and pasted both of your versions here: http://bostonhash.com/temp and this is exactly what I'm looking for. I love it. BUT, when I open the block, it won't shut again. I don't really want to NOT be able to close the block. Since I haven't changed anything from what you posted, it can't be something I did. I would love to figure this out because I use collapsible blocks everywhere on my site - it allows me to have fewer pages. Plus, it's fun to change the text of the "close" feature.
EDIT: I just confirmed it's probably not a browser issue since it is happening in both IE and chrome.
EDIT again: I also just added [[size 150%]] to one of my own blocks here: http://bostonhash.com/on-deck but it is still not closing. This is very strange because I can see above that it opens and closes just fine.
Can you open up the page options temporarily so we can view the source of your page(s)? I took a quick peek and it looks like the iframe may be breaking something for some reason. I won't have time to do any testing until later today, but will try to help figure out what's going on.
Ed
Something changed in the Wikidot parser that breaks the use of [[size ...]] and [[span ...]] ... [[/span]] with collapsible blocks. Here is a direct copy/paste of my post above and the blocks will not collapse. I'm sure if I edit my post above and resave it, the recompiling will break the collapsible blocks in that post too.
The only way around the issue I can see at this point is to use css.
[[module css]] .collapsible-block-link { font-weight: bold; font-size: 150%; font-style: italic; } [[/module]]
The problem with this is that it makes it difficult, if not impossible to style the link differently on the same page.
Copy/Paste of above post
You can use the [[size xxx%]] ... [[/size]] to mimic a H1, H2, etc.
[[size 150%]][[collapsible show="Show This Block" hide="Hide This Block"]][[/size]]
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
[[/collapsible]]
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
The down side is it won't appear in a TOC if you're looking to do that.
-Ed
[edit] I didn't read your original post correctly. I thought you wanted to apply a header font to the collapsible block. You could apply your custom styles via CSS.
.collapsible-block-link is the one you're looking for, I think. Something like this would make it stand out:
.collapsible-block-link {
font-weight: bold;
font-size: 125%;
}
You can apply the CSS using a custom theme or inline with [[span style="..."]] like this:
[[span style="font-size: 150%; font-weight: bold; font-style: italic;"]][[collapsible show="Show This Block" hide="Hide This Block"]][[/span]]
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
[[/collapsible]]
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
[[collapsible [[span style="font-size: 150%; font-weight: bold; font-style: italic;"]]show="Show This Block"[[/span]] [[span style="font-size: 150%; font-weight: bold; font-style: italic;"]]hide="Hide This Block"[[/span]]]]
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
[[/collapsible]]
Does not work too:
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
Some text to show/hide
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 ?
Ed has written a bug: http://feedback.wikidot.com/bug:496 (Inline styles are broken with collapsible blocks)
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 ?
Michal has answered on the bug (http://feedback.wikidot.com/bug:496 ) thread in a comment and written about the "correct" solution: (see also the try: http://try.wikidot.com/collapsible-styling )
[[module CSS]]
.block_1 .collapsible-block-link {
font-size: 150%;
font-weight: bold;
font-style: italic;
}
[[/module]]
[[div class="block_1"]]
[[collapsible show="Show This Block" hide="Hide This Block"]]
Some text to show/hide
[[/collapsible]]
[[/div]]
This way you can style each individual block, wrapping them in divs with different class names and using this class name in CSS rules.
Why this has worked in the past is a senseless question I think..
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 ?
Do you have any idea how to change color of collapsible block title? I mean that:
[[collapsible show="This must be recolored"]]
Text
[[/collapsible]]
I tried all methods I know: ##color, span and some more complicated combos, but…
That would be very useful making something like that on Wikidot:
[[collapsible style="tralala" show="show" hide="hide"]]
It's pretty simple to do with css (either on a per-page basis with in a css module or by applying it globally to your site by adding it to your site's css). I did a demo in the sandbox:
Collapsible Blocks - Styling Show/Hide Links
If you want the same color applied to both the folded and unfolded state, then all you need to do is modify the code Helmuti posted above on 18 Oct 2011.
Thank you very much =) But… It doesn't seem to work as I want - the text doesn't transfer to a new line making the page wide (I want to use a lot of text in "show" part). Also I forgot about underline that would ruin all the idea (cryptography, sort of). Mex was never good in CSS :(
P.S.: Me sorry for bad English ^^'
If I understand what you want to do, you can make the show and hide link text wrap by adding word-wrap: break-word; to your css:
[[module css]]
.collapsible-block-link {
font-size: 150%;
font-weight: bold;
font-style: italic;
word-wrap: break-word;
}
.collapsible-block-unfolded-link a.collapsible-block-link {
color: red;
}
.collapsible-block-folded a.collapsible-block-link {
color: green;
}
[[/module]]
I modified the demo page using some really long show= text.
Why use such old browser versions? Try this link: http://archivist.incutio.com/viewlist/css-discuss/55677
Or this: http://bit.ly/uHKKRR
/forum/t-146349/format-collapsible-block-heading#post-
