classmatic
Set and unset CSS classes on any element with a click.
Perfect for simple websites.
Install
Option 1: Script Tag
Add this <script>
tag just before your closing </body>
tag.
Option 2: NPM Install
npm install classmatic
;
Examples
Sidebar
toggle sidebarsidebar content
Demo: Sidebar on Codepen
Tabs
Tab 1Tab 2Tab 3Content for the first tab.Content for the second tab.Content for the third tab.
Demo: Tabs on Codepen
Nav Menu
Toggle Menu Menu Item Menu Item Menu Item
Demo: Nav Menu on Codepen
Everything at once
data-click-to-toggle-class="sidebar-open"data-show-if=".sidebar-open"data-hide-if=".sidebar-open"data-click-to-add-class="menu-open"data-click-away-to-remove-class="menu-open"data-show-if=".menu-open"data-hide-if=".menu-open"data-click-to-toggle-class="[hello1, hello2, hello3]"data-click-away-to-toggle-class="[hello1, hello2, hello3]"data-show-if=".hello1"data-hide-if=".hello1"
Demo: Kitchen Sink on Codepen
The Attributes
classmatic lets you use a few simple attributes to control when clicking around the page will add/remove/toggle classes.
Set/unset a class when clicking on an element
These attributes make clicking on their element add/remove/toggle a class on any element.
data-click-to-add-class="className selector(optional)"
- Adds the
className
class to all elements that mtachselector
(only when the current element is clicked)
- Adds the
data-click-to-remove-class="className selector(optional)"
- Removes the
className
class from all elements that mtachselector
(only when the current element is clicked)
- Removes the
data-click-to-toggle-class="className selector(optional)"
- Toggles the
className
class on all elements that mtachselector
(only when the current element is clicked)
- Toggles the
Notes
- If
selector
is not specified, classmatic will default to targeting the<body>
element. - You can set/unset multiple classes with a single attribute by using the following syntax with braces:
data-click-to-remove-class="[className1,className2] [selector1,selector2](optional)"
. The arguments inside the brances can NOT have spaces between them. selector
isn't assumed to be a class, so it must include either a.
(for a class selector),#
(for an ID selector), or[]
(for an attribute selector)
Set/unset a class when clicking AWAY FROM an element
These attributes make clicking AWAY from their element add/remove/toggle a class on any element.
data-click-away-to-add-class="className selector(optional)"
- Adds the
className
class to all elements that mtachselector
(only when an element that's not the current element is clicked)
- Adds the
data-click-away-to-remove-class="className selector(optional)"
- Removes the
className
class from all elements that mtachselector
(only when an element that's not the current element is clicked)
- Removes the
data-click-away-to-toggle-class="className selector(optional)"
- Toggles the
className
class on all elements that mtachselector
(only when an element that's not the current element is clicked)
- Toggles the
Important
- A click away action will NOT trigger if the current click event also triggers a normal click action targeting the same
className
andselector
Control visibility of elements
classmatic makes it really easy to hide and show elements based on the classes on the page.
data-show-if="selector"
- shows element ONLY if it or any ancestor element matches the
selector
. hides it otherwise.
- shows element ONLY if it or any ancestor element matches the
data-hide-if="selector"
- hides element ONLY if it or any ancestor element matches the
selector
. shows it otherwise.
- hides element ONLY if it or any ancestor element matches the
Notes
- The styles that make these attributes work are generated automatically for you as soon as classmatic loads. This is why classmatic should be loaded after your page's elements are done loading (just before the closing
</body>
tag). Otherwise, it won't know which elements to generate hide/show styles for.