Javascript Toggle (Attributes)

A collection of vanilla JS and jQuery toggle patterns driven entirely by data attributes. Covers toggle (flip between two states), one-action set, keyboard (Escape key), and multi-component variable-name variants — no classes required.

togglejavascriptjquerydata-attributesaccessibilitykeyboard

Code

index.html

html

<body data-navigation-status="not-active">
  <button data-navigation-control="toggle">Toggle Navigation</button>
</body>

script.js

javascript

// --- Toggle (flip between two states) ---
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-navigation-control="toggle"]').forEach(toggle => {
    toggle.addEventListener('click', () => {
      const statusEl = document.querySelector('[data-navigation-status]');
      if (!statusEl) return;

      // Toggle between "active" & "not-active"
      const current = statusEl.getAttribute('data-navigation-status');
      statusEl.setAttribute('data-navigation-status', current === 'active' ? 'not-active' : 'active');
    });
  });
});

// --- One action (e.g. Close) ---
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-navigation-control="close"]').forEach(action => {
    action.addEventListener('click', () => {
      const statusEl = document.querySelector('[data-navigation-status]');
      if (!statusEl) return;

      // Set "not-active"
      statusEl.setAttribute('data-navigation-status', 'not-active');
    });
  });
});

// --- Keyboard (Escape key) ---
document.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('keydown', e => {
    if (e.keyCode === 27) {
      const statusEl = document.querySelector('[data-navigation-status]');
      if (!statusEl) return;

      // Set "not-active" (only when element is already 'active')
      if (statusEl.getAttribute('data-navigation-status') === 'active') {
        statusEl.setAttribute('data-navigation-status', 'not-active');
      }
    }
  });
});

// --- Multiple toggles (variable name) ---
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-toggle]').forEach(toggle => {
    toggle.addEventListener('click', () => {
      const name = toggle.getAttribute('data-toggle');
      const attr = `data-${name}-status`;
      const statusEl = document.querySelector(`[${attr}]`);
      if (!statusEl) return;

      // Toggle between "true" & "false"
      const isTrue = statusEl.getAttribute(attr) === 'true';
      statusEl.setAttribute(attr, isTrue ? 'false' : 'true');
    });
  });
});

// --- jQuery version (Toggle & Action) ---
$(document).ready(function() {
  // Toggle on click
  $('[data-navigation-control="toggle"]').click(function () {
    if ($('[data-navigation-status]').attr('data-navigation-status') == 'not-active') {
      $('[data-navigation-status]').attr('data-navigation-status', 'active');
    } else {
      $('[data-navigation-status]').attr('data-navigation-status', 'not-active');
    }
  });

  // Close on click
  $('[data-navigation-control="close"]').click(function () {
    $('[data-navigation-status]').attr('data-navigation-status', 'not-active');
  });

  // Close on Escape key
  document.addEventListener('keydown', function (event) {
    if (event.key === 'Escape') {
      $('[data-navigation-status]').attr('data-navigation-status', 'not-active');
    }
  });
});

Guide

Control Element

An element (button, link, etc.) that the user interacts with to fire the toggle or action. Give it a data attribute like data-navigation-control="toggle" or data-navigation-control="close".

Status Element

An element — often the <body> or a surrounding container — that holds the state attribute (e.g. data-navigation-status="not-active"). Target this attribute in CSS to apply conditional styles.

Toggle Variant

The trigger holds data-navigation-control="toggle". On each click, data-navigation-status flips between "active" and "not-active". Rename the attribute prefix to match your component.

One-Action Variant

Use data-navigation-control="close" (or any name) when you only need to set a fixed state rather than toggle back and forth. Replace "not-active" with any status label that fits your use case.

Keyboard Variant

Listens for the Escape key (keyCode 27) and sets data-navigation-status to "not-active" — but only if it is currently "active", so it never interferes with an already-closed state.

Multiple Toggles

Add data-toggle="modal" (or any name) to a trigger. The script reads the name, constructs data-[name]-status, and toggles it between "true" and "false". Reuse the same pattern for as many independent components as needed.

Back to Utilities & Scripts