FancyToggle
- HTML tag name:
<builderius-fancy-toggle>
- Implements 3rd-party script: none
- Allowed children modules: none
- Available since:
0.9.7 PRO
Description
This module allows creating functional and accessible accordion and tabs (tabbed content) functionality. That’s it - it has two modes. Unlike the Tabs module, this component is being rendered automatically whenever JSON content is provided.
How it works
The module creates <div is="builderius-fancy-toggle">
extended HTML tag. It is a modular self contained instance of custom JS script.
Since <builderius-fancy-toggle>
is a custom HTML element, its default behavior is equal to inline element, not block; it can be changed any time with display
CSS property.
This module can work as an accordion or tabs. The module does not accept any children, its layout is built automatically based on the content provided. Similar to the Accordion module, FancyToggle also expects an array of items each of which must be an object with keys name
and text
. Both these values might be HTML.
An active tab and panel items both have class active
added to them.
API
Attributes
data-content
(required)
This attribute accepts a stringified JSON array (each item is an object) of data that must be rendered.
data-mode
This attribute expects one of two values: accordion
or tabs
. If empty, the default value will be applied. Default value is accordion
.
data-initial-item
This attribute accepts numeric values. Each number corresponds with the index value of content items, starting from 1. If set to 0, then no initial items will be open. Default value is: '1'.
Events
ready
(scope: element)
builderius-fancy-toggle-ready
(scope: window)
This event is getting fired every time the component is being initiated/re-initiated. It also passes some data:
{ el, content }
Where el
is the reference to the HTML element and content
is data provided to the component.
Methods
reInit
This method resets and initiates the component.