data-ix-ClickActive
Click-Active
Summary
This solution allows you to create items that get active classes when they are clicked which is great for state tracking unique interactions or setting up filter lists.
01
Prefix
As with all attributes in this library all attributes in used when implementing this solution start with the following prefix: if you see the tag {prefix} used on this page it refers to the following prefix:
02
Elements
The clickactive item has three interrelated elements, the only necessary one for the solution to work is the trigger element.
Attribute Name
Value
Default
Description
data-ix-clickactive=trigger
wrap
boolean
An item that will get a class of is-active when clicked and have it removed when clicked again.
data-ix-clickactive=target
wrap
boolean
An additional element that will also get the active class when the trigger is clicked. In order for them to be linked they both must share the same value for a
data-ix-clickactive-id attribute.
data-ix-clickactive=wrap
wrap
boolean
The element containing all your clickactive triggers. If items are not inside a wrap they will still work but some of the options won't be available.
03
Options
All options are applied to the data-ix-clickactive=wrap element unless otherwise stated
Attribute Name
Value
Default
Description
{prefix}-id
string
null
Use this attribute to pair a trigger and target element by giving them matching values to this ID attribute. This is required for a target element to work.
{prefix}-class
string
is-active
The active class used on the trigger element.
{prefix}-first-active
boolean
false
Set the first trigger in the wrap to active by default.
{prefix}-keep-one-active
boolean
false
Always keep at least one trigger active
{prefix}-one-active
boolean
false
Only one trigger may be active at a time. Will de-activate any active triggers when a new one is activated.
{prefix}-start-active
boolean
false
Apply this to a trigger element to have it start as active.
