Skip to main content

FancyToggle

info
  • 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.

tip

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.