vanilla-helpers

vanilla.js

A lightweight, production-ready vanilla JavaScript helper library for common website functionality. JavaScript often gets a bad reputation for being bloated, inaccessible, and unnecessary (and rightfully so when misused). However, there are legitimate cases where JavaScript is essential for advanced interactivity that HTML and CSS simply cannot handle alone. vanilla.js bridges this gap by providing secure, privacy-respecting, accessibility-compliant helper functions that follow modern web standards.

Unlike jQuery and other frameworks that add significant overhead, vanilla.js uses pure JavaScript with zero dependencies. It's white-label and framework-agnostic, making it perfect for any project, WordPress sites, static HTML, or modern web applications. Each function is self-contained and can be copied individually if you only need specific functionality. The library auto-initializes on page load and uses data attributes exclusively, so there are no class name conflicts with your CSS frameworks. Whether you're an experienced developer looking to avoid repetitive code, or a non-developer who just needs to add a modal or accordion to your site, vanilla.js provides plug-and-play solutions that just work.

Installation

Direct Download: Download vanilla.js and include it in your HTML:

<script src="vanilla.js"></script>

CDN:

<script src="https://unpkg.com/vanilla-js"></script>

Functions

Toggle Classes

Add/remove/toggle classes on elements for show/hide functionality and state management.

<button data-toggle-class="is-active" data-toggle-target="#menu">Toggle Menu</button>

Dismissible Alerts

Close and remove alert banners, notifications, or any dismissible content.

<div data-dismissible>
	<p>This is an alert message</p>
	<button data-dismiss>&times;</button>
</div>

Back to Top Button

Automatically show/hide a back-to-top button based on scroll position with smooth scrolling.

<button data-back-to-top>Back to Top</button>

Password Toggle

Show/hide password input text with a toggle button.

<input type="password" id="pwd">
<button data-password-toggle="#pwd">Show Password</button>

Copy to Clipboard

Copy text to clipboard with visual feedback.

<!-- Copy from data attribute -->
<button data-copy="Text to copy">Copy</button>

<!-- Copy from another element -->
<button data-copy-target="#code-snippet">Copy Code</button>
<pre id="code-snippet">console.log('Hello');</pre>

External Link Handling

Automatically detect external links and open them in a new tab with proper security attributes.

<!-- Automatically detected and enhanced -->
<a href="https://example.com/">External Link</a>

<!-- Prevent external handling -->
<a href="https://example.com/" data-internal>Stay in Tab</a>

Accessible Interaction Handler

Make any element with tabindex="0" fully keyboard accessible (Enter and Space key support).

<div tabindex="0" onclick="doSomething()">Clickable div</div>

Smooth Scroll Enhancer

Enhance smooth scrolling anchor links with offset support for fixed headers.

<!-- Basic smooth scroll -->
<a href="#section">Scroll to Section</a>

<!-- With offset for fixed header -->
<a href="#section" data-scroll-offset="80">Scroll to Section</a>

Responsive Videos

Automatically wrap videos in aspect-ratio containers for responsive embedding.

<!-- 16:9 aspect ratio (default) -->
<iframe data-responsive-video="16:9" src="https://youtube.com/embed/..."></iframe>

<!-- 4:3 aspect ratio -->
<video data-responsive-video="4:3" src="video.mp4"></video>

Loading States

Disable form buttons and show loading text during form submission.

<form data-loading-form action="/submit" method="post">
	<button data-loading-button data-loading-text="Sending...">Submit</button>
</form>

Mobile Nav Toggle

Toggle mobile navigation menus with proper ARIA attributes.

<button data-nav-toggle="main-nav" aria-expanded="false">Menu</button>
<nav data-nav="main-nav">
	<!-- Navigation items -->
</nav>

Form Validation

Real-time client-side form validation with custom error messages and password matching.

<form data-validate-form>
	<input type="email" required>
	<input type="password" id="pwd" required>
	<input type="password" data-validate-match="#pwd" required>
	<button type="submit">Submit</button>
</form>

Accordion

Expandable/collapsible content sections with optional "close others" behavior.

<div data-accordion data-accordion-close-others="true">
	<button data-accordion-trigger aria-expanded="false">Question 1</button>
	<div data-accordion-content>Answer 1</div>
	
	<button data-accordion-trigger aria-expanded="false">Question 2</button>
	<div data-accordion-content>Answer 2</div>
</div>

Dropdown Menus

Keyboard and touch accessible dropdown navigation menus.

<div data-dropdown>
	<button data-dropdown-trigger aria-expanded="false">Menu</button>
	<ul data-dropdown-menu>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
	</ul>
</div>

Modal/Dialog

Accessible modal popups with focus trapping and keyboard support.

<button data-modal-open="signup">Open Modal</button>

<div data-modal="signup" data-modal-close-esc="true" data-modal-close-overlay="true" aria-hidden="true">
	<button data-modal-close>&times;</button>
	<h2>Modal Content</h2>
	<p>Your content here...</p>
</div>

Image Lightbox

Click any image to view it in a fullscreen overlay with keyboard navigation.

<!-- Use current src -->
<img src="image.jpg" data-lightbox alt="Description">

<!-- Use different full-size image -->
<img src="thumb.jpg" data-lightbox="full-size.jpg" alt="Description">

Browser Support

Modern evergreen browsers (last 2 versions):

• Firefox
• Safari
• Chrome
• Edge

License

Public Domain (use freely)