codejquery.com

Small examples. Clear explanations.

Less guessing.
More working code.

Find a practical jQuery pattern, see what it does, and compare it with plain JavaScript. Start small, understand the pieces, and adapt the example to your own page.

Explore the examples →
EventsFormsDOM updatesFilteringEvent delegation

Know what you are copying

One task. Two ways to solve it.

Each example includes shared HTML, a jQuery solution, and an equivalent JavaScript solution. Choose one implementation; attaching both sets of handlers to the same elements can make an action run twice.

This page works entirely offline. Its interactive demos use the plain JavaScript versions shown below. The jQuery examples are instructional snippets for projects where jQuery is already loaded; this page does not load or imitate jQuery.

Place the selected script after its HTML, near the end of the body. For the jQuery option, load your project’s compatible jQuery library before the example. Copy buttons copy the displayed snippet; JavaScript snippets belong inside your own script element or JavaScript file.

Independent learning resource. Not an official jQuery project. API references: class toggling and form values.

The snippet library

Try it. Read it. Make it yours.

Six focused examples for everyday interface work. Each demo runs in its own small sandbox so examples do not interfere with one another.

Classes and events

Toggle a highlight

Toggle a CSS class when a button is clicked. Change the selector or class name to adapt the example.

Live demo

Powered by the JavaScript version below.
HTML
<button id="highlight" type="button">Toggle highlight</button>
<p id="message">A little emphasis goes a long way.</p>
<style>.highlighted { background: #d9f59b; padding: 12px; }</style>
jQuery
$('#highlight').on('click', function () {
  $('#message').toggleClass('highlighted');
});
JavaScript
document.querySelector('#highlight').addEventListener('click', function () {
  document.querySelector('#message').classList.toggle('highlighted');
});
Visibility and accessibility

Show or hide a panel

Keep the hidden state and expanded state in sync. Use a real button so the control works with a keyboard.

Live demo

Powered by the JavaScript version below.
HTML
<button id="toggle" type="button" aria-expanded="false" aria-controls="panel">Toggle details</button>
<div id="panel" hidden>Here are the extra details.</div>
jQuery
$('#toggle').on('click', function () {
  const opening = $('#panel').prop('hidden');
  $('#panel').prop('hidden', !opening);
  $(this).attr('aria-expanded', String(opening));
});
JavaScript
document.querySelector('#toggle').addEventListener('click', function () {
  const panel = document.querySelector('#panel');
  const opening = panel.hidden;
  panel.hidden = !opening;
  this.setAttribute('aria-expanded', String(opening));
});
Forms and text

Preview an input value

Read a field on every input event and insert it as text. Using text output avoids interpreting the value as HTML.

Live demo

Powered by the JavaScript version below.
HTML
<label for="name">Display name</label>
<input id="name" placeholder="Try a name">
<p>Hello, <span id="preview">friend</span>!</p>
jQuery
$('#name').on('input', function () {
  $('#preview').text($(this).val().trim() || 'friend');
});
JavaScript
document.querySelector('#name').addEventListener('input', function () {
  document.querySelector('#preview').textContent = this.value.trim() || 'friend';
});
Search and filtering

Filter a list as you type

Compare each item with a case-insensitive query. An empty query shows the whole list again.

Live demo

Powered by the JavaScript version below.
HTML
<label for="filter">Find a language</label>
<input id="filter" type="search" placeholder="Try java">
<ul id="items"><li>JavaScript</li><li>Python</li><li>Java</li><li>Ruby</li></ul>
jQuery
$('#filter').on('input', function () {
  const query = $(this).val().trim().toLowerCase();
  $('#items li').each(function () {
    $(this).prop('hidden', !$(this).text().toLowerCase().includes(query));
  });
});
JavaScript
document.querySelector('#filter').addEventListener('input', function () {
  const query = this.value.trim().toLowerCase();
  document.querySelectorAll('#items li').forEach(function (item) {
    item.hidden = !item.textContent.toLowerCase().includes(query);
  });
});
Forms and properties

Enable a button with a checkbox

Use the checked and disabled properties for live control state. This is a UI pattern, not a substitute for server-side validation.

Live demo

Powered by the JavaScript version below.
HTML
<label><input id="agree" type="checkbox"> I am ready to continue</label>
<button id="continue" type="button" disabled>Continue</button>
jQuery
$('#agree').on('change', function () {
  $('#continue').prop('disabled', !this.checked);
});
JavaScript
document.querySelector('#agree').addEventListener('change', function () {
  document.querySelector('#continue').disabled = !this.checked;
});
Event delegation

Handle clicks on new list items

Attach the handler to a stable parent. The remove action also works for items added after the handler was registered.

Live demo

Powered by the JavaScript version below.
HTML
<button id="add" type="button">Add item</button>
<ul id="tasks"><li>Example item <button type="button" class="remove">Remove</button></li></ul>
jQuery
$('#add').on('click', function () {
  const item = $('<li>').text('New item ');
  const button = $('<button>', {type: 'button', class: 'remove', text: 'Remove'});
  item.append(button).appendTo('#tasks');
});
$('#tasks').on('click', '.remove', function () {
  $(this).closest('li').remove();
});
JavaScript
document.querySelector('#add').addEventListener('click', function () {
  const item = document.createElement('li');
  item.textContent = 'New item ';
  const button = document.createElement('button');
  button.type = 'button';
  button.className = 'remove';
  button.textContent = 'Remove';
  item.appendChild(button);
  document.querySelector('#tasks').appendChild(item);
});
document.querySelector('#tasks').addEventListener('click', function (event) {
  const button = event.target.closest('.remove');
  if (button && this.contains(button)) button.closest('li').remove();
});

When something does not work

Check the fundamentals first.

Why do I see “$ is not defined”?

The jQuery library may be missing, may have failed to load, or may load after your code. Another library or no-conflict configuration can also affect the dollar-sign alias. Check your script order and the browser console. The plain JavaScript examples on this page do not require jQuery.

Why does my click handler do nothing?

Confirm that the selector matches the intended element and that the element exists when the handler is attached. Put the script after the relevant HTML or initialize it after the DOM is ready. For elements created later, consider event delegation.

Why does an action happen twice?

Check whether the same handler was registered more than once, a script was loaded twice, or both versions of an example were installed. Use either the jQuery implementation or the JavaScript implementation for a given task.

Should I use text insertion or HTML insertion?

Use text insertion for text values, especially input supplied by visitors. The input preview example uses jQuery’s text method or JavaScript’s textContent property so the value is displayed as text rather than interpreted as markup.

Are these complete application components?

They are small learning patterns. A production form, search interface, or component may need additional validation, error handling, keyboard behavior, status announcements, and server-side processing appropriate to its purpose.

Beyond the code editor

Resources for your next project.

Building a useful website is often one part of a wider project. These separate resources may help when your plans involve funding research or industrial equipment.

Research grant opportunities

Working on a business or community initiative? USGrants.org provides grant information and funding resources for exploring possible programs. Eligibility depends on the specific opportunity.

Explore USGrants.org →

Explore surplus equipment solutions

Have excess machinery, industrial equipment, or inventory at your business? Surplus Network provides a starting point for exploring surplus industrial asset solutions.

Explore Surplus Network →