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.
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')) …
- 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,
}
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.
Click Here for the sample …