Class Toggles

CGU Core implements a class toggling framework which can be used to control class names on elements.

Example

<form id="my-form" class="u-pad u-transition-300">
  <div class="h3">My Form</div>
  <input type="text" id="my-text-field" class="form-field"/>
</form>

<br>

<a class="class-toggle button button--small" href="#"
   data-target="#my-form" 
   data-class="u-bg-red">Change form color</a>

<a class="class-toggle button button--small" href="#"
   data-target="#my-text-field"
   data-class="u-display-none">Show/hide text field</a>

How to use

Class toggles utilize a series of classes and attributes:

Required

Class: class-toggle

Declares a node as a control for toggling some specified class name.

Attribute: data-target

Takes a CSS selector targeting the element that is to receive the class (and possibly focus).

Attribute: data-class

Takes a valid CSS class name.