toggle.js

Make selected element(s) togglable, if that’s a real word.

Allows you to toggle one or more HTML elements. This can be useful, for example to generate menus, tabs or accordions.

This will be incorporated in a more extensive Widgets collection (TBA), but, because of its usefulness, this simpler version will still be maintained.

Usage

In JavaScript, invoke the following:

toggle(selector,attribute,options);

In CSS, you can select a toggled element as follows:

element[attribute] {
	…
}

In JavaScript, you can select a toggled element as follows:

document.querySelector('element[attribute]')
document.querySelectorAll('element[attribute]')

or you can test on as follows:

if(element.hasAttribute('attribute')) …

Parameters

element

HTML Element, such as from document.getLementById().

Can be a CSS style selector such as 'ul#menu>li'

attribute

Arbitrary name of an attribute.

<dt><strong>options</strong></dt>
<dd>An array of options. This is in the form of:</dd>
<dd><pre>{
only: false,
bubbleOK: false,
callback: undefined,	

}

Options

The options object is, well, optional. If omitted, the values are as above.

If you want to set any options supply an object with any of the above properties.

only

Whether selecting an element will de-select others.

bubbleOK

Whether nested inner elements can activate the toggle.

callback

A function which will be called on toggling.

callbackOn

Called only if item is toggled on. Called before callback, if any.

callback

Called if item is toggled on or off.

callbackOff

Called only if item is toggled off. Called after callback, if any.

selected

CSS style selector of element(s) which should be selected already.

Sample

Click Here for the sample …