Toggler

The Codebase toggler is a simple JavaScript that adds/removes a CSS class of your choice from the toggler target element.

codebase.css carries no styling for the Toggler component. It’s all up to you.

The following example has a little CSS embedded near here in the HTML, in a <style> tag – to show you the toggler in operation:

Here is another example – this time, the toggler is situated within the target block. But in this case you can’t un-toggle it, because the orange block will have disappeared:

(You will need to refresh your browser to make the element above appear again.)

One more toggler example – this time, a Codebase utility background color class is being added/removed from the target element:

Setting Up a Toggler

<span data-toggle-id="your-id" data-toggle-class="your-class">Click me</span>
<div id="your-id">
  This target DIV will be toggled (i.e. it will have "your-class" added/removed)
</div>

1. Assign your chosen id="your-id" to the target element (and apply your styles through that ID)
2. "Connect" the toggler element to the target element using data-target-id="your-id"
3. Choose the toggler class that you want applied to the target element using data-target-class="your-class"

For styling the two "states" of the toggler target element, you can use e.g.:

#your-id { }
#your-id.your-class { }

Note: You can’t put two classes in data-toggle-class="" separated by a space or a dot. And you can’t use more than one data-toggle-class="" in a Toggler.

That’s all there is to the Codebase toggler. Unlike the Codebase activator, toggler has no “click outside to dismiss”, and no “toggling one causes un-toggling of others”. But you can toggle more than one toggler on a page at the same time. Example:

Toggler Attributes

Attribute	Notes
data-toggle-id=""	Put this in the toggler controller tag. Assign the ID of the target (i.e. the thing being toggled).
id=""	The toggler target content ID. Add your own styles to the toggled state of the target, and/or use data-toggle-class="".1
data-toggle-class=""	Put this in the toggler controller tag. Choose the CSS class that you wish to add/remove on the target. Add your own styles if necessary.

¹ If you use data-toggle-class="", that CSS class can be a Codebase class, or one of your own.

---