Just thought I'd share in case someone finds it helpful.
Your wiki code would look like:
[[collapsible show="Title" hide="Title"]] Content [[/collapsible]] The show and hide parameters can differ or be the same. The main advantage is that the triangle glyphs are automatically added via css pseudo-elements and don't need explicit enumeration in the show and hide params. Also, an "expand" and a "hide" tooltip are added automatically.
Add the code below to your theme.
// This part creates the arrows before the collapsible block .collapsible-block-folded::before { content: '►'; font-size:0.5em; line-height:0.7em; vertical-align:middle; color:#00A; } .collapsible-block-unfolded>.collapsible-block-unfolded-link::before { content: '▼'; font-size:0.5em; line-height:0.7em; vertical-align:middle; color:#00A; } // The section below creates the pseudo-tooltips. .collapsible-block-folded { position:relative; } .collapsible-block-unfolded-link { position:relative; } .collapsible-block-folded >.collapsible-block-link:hover::before{ content: 'expand'; font-size:0.5em; line-height:1.1em; bottom:-10px; left:15px; background-color:#fefefe; padding:0.1em 0.2em; border:1px solid #bbbbbb; border-radius:3px; white-space:pre; display:block; position:absolute; font-family:verdana,arial,helvetica,sans-serif; font-weight:normal; font-style:normal; color:#444; box-shadow:3px 3px 3px #444; } .collapsible-block-unfolded-link >.collapsible-block-link:hover::before{ content: 'hide'; font-size:0.5em; line-height:1.1em; bottom:-10px; left:15px; background-color:#fefefe; padding:0.1em 0.2em; border:1px solid #bbbbbb; border-radius:3px; white-space:pre; display:block; position:absolute; font-family:verdana,arial,helvetica,sans-serif; font-weight:normal; font-style:normal; color:#444; box-shadow:3px 3px 3px #444; } Enjoy! And please provide any feedback.