Codebase Activator Components

AlpineJS does all that you need for Codebase – and much more. I recommend you learn and use Alpine with Codebase in most circumstances.

However, Codebase 4 does have its own tiny script activator.js (3 KB, minified).

If you only have an offcanvas sidebar or a few dropdowns, then it’s easier just to go with with Activator.

Also, Activator can be useful if you are using Codebase on a CMS frontend project and you have a need (or, your client has a need) to add a tab system or some showhide from within the CMS editor, then you may find AlpineJS doesn’t work for that purpose – i.e. if the CMS editor doesn’t allow you to add AlpineJS directives and supplementary JavaScript.

Note: Activator and AlpineJS components can’t dismiss each other by clicking away. So, you might not want to use both Activator and AlpineJS together in a project.

How Codebase’s Activator Works

1. activator.js looks for the Codebase -control and -panel suffixed CSS classes in your HTML.
2. When you click the control element (usually a button or a tab), it adds and/or removes some .active classes – all depending on what you have put into some aria-controls and data attributes on your control element.
3. Activator also toggles aria-expanded="false" ⇄ aria-expanded="true". And it can optionally add a body scroll lock when you need it, e.g. behind modal panels.

There are no JS based animations in codebase.js (e.g. no slide-down and slide-up). In Codebase, all animations are done using CSS3 transitions and transforms.

As with simple Codebase components, Codebase Activator components are mostly built from utility classes with minimal or no special CSS classes of their own. Usually the unique component CSS has only to do with the transitions between the inactive and active states.

Besides the several Activator components shown in these docs, feel free to roll your own too, if there’s anything else you need. Follow the concepts outlined in the Activator classes and attributes.

The Simplest Activator Component

The simplest Activator component is the showhide slide revealer. Showhide is the simplest Activator component, in that it has the fewest number of HTML atttibutes and is therefore the easiest to understand:

<div class="b-thin rounded mb-3 flex flex-column">
  <button
    aria-controls="showhide-1"
    aria-expanded="false"
    data-control="toggle"
    class="showhide-control control-indicator-chevron unrounded b-0 p-block flex flex-space-between"
  >
    Click me
  </button>
  <div id="showhide-1" class="showhide-panel">
    <div class="p-2">
      <p class="mb-1"><strong>Showhide panel content</strong></p>
      <p>Lorem ipsum dolor sit amet ...</p>
    </div>
  </div>
</div>

See Activator classes and attributes.