jQuery Navigation & Interaction Examples

Selecting and clicking

$(selector) selects elements; .on() attaches an event listener.

HTML

<button type="button" id="trigger">Try it</button>
<p id="message">Down the Rabbit-Hole</p>

Edit HTML

CSS

.highlight { background: #7FFF00; padding: 20px; }
.enter { animation: enter .8s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}

Edit CSS

JAVASCRIPT

$("#trigger").on("click", function () {
  $("#message").text("Hello from jQuery!");
});

Edit JAVASCRIPT

Try this → Compare this with the vanilla JavaScript examples.

Classes

addClass, removeClass and toggleClass mirror common classList actions.

HTML

<button type="button" id="trigger">Try it</button>
<p id="message">Down the Rabbit-Hole</p>

Edit HTML

CSS

.highlight { background: #7FFF00; padding: 20px; }
.enter { animation: enter .8s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}

Edit CSS

JAVASCRIPT

$("#message").addClass("highlight");
$("#trigger").on("click", function () {
  $("#message").toggleClass("highlight");
});

Edit JAVASCRIPT

Try this → Compare this with the vanilla JavaScript examples.

Show and hide

toggle() switches visibility. Use a button and expose the state for assistive technology.

HTML

<button type="button" id="trigger">Try it</button>
<p id="message">Down the Rabbit-Hole</p>

Edit HTML

CSS

.highlight { background: #7FFF00; padding: 20px; }
.enter { animation: enter .8s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}

Edit CSS

JAVASCRIPT

$("#trigger").attr("aria-expanded", "true").attr("aria-controls", "message");
$("#trigger").on("click", function () {
  $("#message").toggle();
  $(this).attr("aria-expanded", String($("#message").is(":visible")));
});

Edit JAVASCRIPT

Try this → Compare this with the vanilla JavaScript examples.

Menu transition

stop(true, true) clears queued effects. Reduced-motion preferences skip the sliding transition.

HTML

<button type="button" id="trigger">Try it</button>
<p id="message">Down the Rabbit-Hole</p>

Edit HTML

CSS

.highlight { background: #7FFF00; padding: 20px; }
.enter { animation: enter .8s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}

Edit CSS

JAVASCRIPT

$("#trigger").attr("aria-expanded", "true").attr("aria-controls", "message");
$("#trigger").on("click", function () {
  const open = $(this).attr("aria-expanded") === "true";
  const duration = matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 180;
  $(this).attr("aria-expanded", String(!open));
  $("#message").stop(true, true).slideToggle(duration);
});

Edit JAVASCRIPT

Try this → Compare this with the vanilla JavaScript examples.

Without a library

The vanilla equivalent

The same text-changing interaction needs only standard browser APIs.

HTML

<button type="button" id="trigger">Try it</button>
<p id="message">Down the Rabbit-Hole</p>

Edit HTML

CSS

.highlight { background: #7FFF00; padding: 20px; }
.enter { animation: enter .8s ease-out; }
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}

Edit CSS

JAVASCRIPT

const button = document.querySelector("#trigger");
const message = document.querySelector("#message");
button.addEventListener("click", () => {
  message.textContent = "Curiouser and curiouser!";
});

Edit JAVASCRIPT

Try this → Compare querySelector with $(), and textContent with .text().