JQTwistyContrib

Lightweight twisty plugin

JQTwistyContrib is a lightweight twisty plugin implementing a subset of the features provided by TwistyPlugin, but using javascript only. This comes in handy when a twisty is needed but without having to render it using the Foswiki backend server.

A "twisty" is a collabsable area to hide/show certain areas of a webpage.

Usage

A twisty consists of two elements: a trigger and a container. When the trigger is clicked by the user, the container will be collapsed or expanded. The behavior of the twisty is configured using html5 data attributes part of the trigger element. Use the jqTwisty css class to install the twisty on a trigger element. The toggle container is then specified using a target argument, defaulting to the next adjacent html node in the tree,

%BUTTON{"Click me" class="jqTwisty"}%
<div>
Here comes the container.
</div>

Parameter

Name Description Default
openText text of the trigger button when the container is hidden html text of the trigger element
closeText text to be displayed when the container is shown same as openText
openImg url of an image displayed when the container is hidden  
closeImg url of an image displayed when the container is shown  
openIcon font awesome icon name when the container is hidden, e.g. fa-caret-down
closeIcon font awesome icon name when the container is shown, e.g. fa-caret-right
initialState initial state of the container: can be 'open' or 'close' close
remember remember the state of the twisty using localStore false
target jquer selector of container(s) to toggle their visibility next html node following the twisty trigger

Events

State change events

JQTwistyContrib will fire an event according to the state changes of the twisty. That way you'll be able to bind additional behaviors on its base, for instance when the twisty is fully open.

Event Description
inited.twisty the twisty has been initialized
beforeOpen.twisty the twisty is about to be opened
afterOpen.twisty the twisty has been opened
beforeClosed.twisty the twisty is about to be closed
afterClose.twisty the twisty has been closed

Access events

You might also fire an event on the twisty itself to change the state from within javascript. See the accordion example below coordinating multiple twisties.

Event Description
open.twisty opens the twist
close.twisty closes the twist

Examples

Add a twisty to a verbatim section

Show Code

Simple

open

Multiple containers

open

State changes

open

Accordion

Section 1

Section 2

Section 3

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab -> "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button. Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will not show up in the search results.

You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)
cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See https://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Dependencies

NameVersionDescription
Foswiki::Plugins::JQueryPlugin>=4.00Required.

Change History

22 Jan 2024: added openIcon and closeIcon parameters
26 Oct 2020: compatibility with jquery-3; added remember feature
16 Aug 2018: maintenance and docu
17 Jul 2015: added css classes to indicate twisty state
15 Mar 2014: fixed syntax error in contrib stub
13 Dec 2013: support html elements to be used as twisty toggles
12 Jun 2012: initial release

PackageForm edit

Author Michael Daum
Version 4.00
Release 22 Jan 2024
Description Lightweight twisty plugin
Repository https://github.com/foswiki/JQTwistyContrib
Copyright © 2012-2024 Michael Daum
License GPL (Gnu General Public License)
Home Foswiki:Extensions/JQTwistyContrib
Support Foswiki:Support/JQTwistyContrib
Topic revision: r1 - 22 Jan 2024, UnknownUser
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback