classmatic
Advanced tools
Readme
Set and unset CSS classes on any element with a click.
Perfect for simple websites.
Option 1: Script Tag
Add this <script> tag just before your closing </body> tag.
<script src="https://cdn.jsdelivr.net/gh/panphora/classmatic@v0.6.1/dist/classmatic.min.js"></script>
Option 2: NPM Install
npm install classmatic
import classmatic from 'classmatic';
<button data-click-to-toggle-class="sidebar-open">toggle sidebar</button>
<aside data-click-away-to-remove-class="sidebar-open" data-show-if=".sidebar-open">sidebar content</aside>
Demo: Sidebar on Codepen
<button data-click-to-add-class="tab-1-active" data-click-to-remove-class="[tab-2-active,tab-3-active]">Tab 1</button>
<button data-click-to-add-class="tab-2-active" data-click-to-remove-class="[tab-1-active,tab-3-active]">Tab 2</button>
<button data-click-to-add-class="tab-3-active" data-click-to-remove-class="[tab-1-active,tab-2-active]">Tab 3</button>
<div data-show-if=".tab-1-active">Content for the first tab.</div>
<div data-show-if=".tab-2-active">Content for the second tab.</div>
<div data-show-if=".tab-3-active">Content for the third tab.</div>
Demo: Tabs on Codepen
<button data-click-to-toggle-class="nav-menu-open">Toggle Menu</button>
<ul class="nav-menu__menu" data-click-away-to-remove-class="nav-menu-open" data-show-if=".nav-menu-open">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
Demo: Nav Menu on Codepen
<button data-click-to-toggle-class="sidebar-open">data-click-to-toggle-class="sidebar-open"</button>
<div data-show-if=".sidebar-open">data-show-if=".sidebar-open"</div>
<div data-hide-if=".sidebar-open">data-hide-if=".sidebar-open"</div>
<button data-click-to-add-class="menu-open">data-click-to-add-class="menu-open"</button>
<button data-click-away-to-remove-class="menu-open">data-click-away-to-remove-class="menu-open"</button>
<div data-show-if=".menu-open">data-show-if=".menu-open"</div>
<div data-hide-if=".menu-open">data-hide-if=".menu-open"</div>
<button data-click-to-toggle-class="[hello1,hello2,hello3]">data-click-to-toggle-class="[hello1, hello2, hello3]"</button>
<button data-click-away-to-toggle-class="[hello1,hello2,hello3]">data-click-away-to-toggle-class="[hello1, hello2, hello3]"</button>
<div data-show-if=".hello1">data-show-if=".hello1"</div>
<div data-hide-if=".hello1">data-hide-if=".hello1"</div>
Demo: Kitchen Sink on Codepen
classmatic lets you use a few simple attributes to control when clicking around the page will add/remove/toggle classes.
These attributes make clicking on their element add/remove/toggle a class on any element.
data-click-to-add-class="className selector(optional)"
className class to all elements that mtach selector (only when the current element is clicked)data-click-to-remove-class="className selector(optional)"
className class from all elements that mtach selector (only when the current element is clicked)data-click-to-toggle-class="className selector(optional)"
className class on all elements that mtach selector (only when the current element is clicked)Notes
selector is not specified, classmatic will default to targeting the <body> element.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)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)"
className class to all elements that mtach selector (only when an element that's not the current element is clicked)data-click-away-to-remove-class="className selector(optional)"
className class from all elements that mtach selector (only when an element that's not the current element is clicked)data-click-away-to-toggle-class="className selector(optional)"
className class on all elements that mtach selector (only when an element that's not the current element is clicked)Important
className and selectorclassmatic makes it really easy to hide and show elements based on the classes on the page.
data-show-if="selector"
selector. hides it otherwise.data-hide-if="selector"
selector. shows it otherwise.Notes
</body> tag). Otherwise, it won't know which elements to generate hide/show styles for.FAQs
The npm package classmatic receives a total of 1 weekly downloads. As such, classmatic popularity was classified as not popular.
We found that classmatic demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.