Toggle CSS Classes With Pure JavaScript – ClassToggle.js

Preview:

Description:

ClassToggle.js is a small and reusable JavaScript library used to toggle CSS classes with custom triggers.

How to use it:

Place the minified version of the ClassToggle.js library at the bottom of the web page.

<script src="ClassToggle.min.js"></script>

Create triggers and associated elements as follows:

<span id="1_trigger" class="execute_1">click on me</span>
<span id="2_trigger" class="execute_2">click on me</span>
<span class="execute_1">1</span>
<span class="execute_2">2</span>
<span class="execute_1">3</span>
<span class="execute_2">4</span>
<span class="execute_1">5</span>

Apply custom CSS styles to the elements.

[class*=execute].active { background: #ccf }
[id*=trigger].active:hover { background: #66f }

Changelog:

12/28/2018

• v0.1.0