• View
• Edit
• History
• Attach
• Print
• Backlinks

Toggler

Questions answered by this recipe

• Can I add code-folding or text-folding to my wiki?
• Can I use an image to toggle / show-hide a section of the wiki?
• Can I make the Toggler (whether image or text) 'sticky' so it stays visible while scrolling content?

All sections are optional, you can remove those that do not apply to your recipe, and add new ones.

Description

Easy Code/Text folding, using images or text, with a 'sticky' toggler.

This is a fork of the UnToggle recipe.
The Toggler recipe allows images as well as text to be the "toggler" (the clickable element to trigger or make visible additional content.)
It also adds JavaScript to allow the toggler to become sticky, when content is expanded; Making it easier to fold or hide the content again.
You will need the right CSS to achieve this, this recipe includes a working set of css code for that.

Developed to help display a summary or outline format of information, while allowing the viewer to easily expand (un-fold) the hidden, extended content.

I have made a batch of "FoldMarks" -- small images I use for Code-Folding on my wiki pages:

More can be found at: https://www.snippetspub.com/Snippets/Wiki-CodeFolding
These are released to the public domain.

Along with a working demonstration of code-folding combined with Syntax-Highlighting / Decoration
at https://www.snippetspub.com/Nomads/Web-KBSlider-Code

Installation

Download and unzip toggler.zipΔ
(this is a single file: toggler.js, but js files cannot be uploaded so I zipped it. )

• copy toggler.js to your (farm's) /pub/ directory.
• add these lines to your local/config.php :

On my Skins the last line needs to be adjusted for my Menu-Bar for example to offset by 38 pixels:

$HTMLStylesFmt['toggler'] = '.stucktog { position: fixed; top: 38px; }';

To get simple markup to make your text or image into a Toggler, and also to select the content to be hidden/folded you might also install the ClassTags recipe.

Configuration

You may want to add your own CSS to decorate the toggle-text in which case you could remove the line:

ALTERNATE METHOD FOR STICKY:
The code relies on the JavaScript to handle the "Sticky" aspect. In theory you should be able to use "sticky" as part of your CSS. I have not had consistent luck with that yet. But here is the code that should work:

   .sticky {
        position: -webkit-sticky; 
        position: sticky;
        top: 0;
     } 

This can be added to your /pub/css/local.css file or to the css from your Skin. (You might look at the ManageCSS recipe.)

Usage

This is a direct fork of the UnToggle recipe.
see the UnToggle page for full original details.

Screen Shots

Here are two pictures to show the Toggler recipe in use on my snippetspub.com website:

With Text hidden -- "folded"

With Text visible -- "unfolded" of "untoggled"

Notes

This was developed as a component of my coming-soon recipe for Syntax-Highlighting / Decoration
the core is a condensed version of UnToggle, with all the same function
If you want a slightly faster exact replacement without the image/sticky features, you can use:
untoggle.zipΔ ( unzipped into untoggle.js ) as a direct replacement/update

Change log / Release notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

2022-06-29

• Read carefully: if you already installed Toggler - you will need to be sure the new CSS class-names are updated.
• Updated to avoid the use of the .sticky class by adding a JS function to handle sticky function.
• Changed the CSS names to avoid conflicts with other CSS elements.

See also

UnToggle ClassTags

Contributors

Comments

See discussion at Toggler-Talk?