JavaScript — Displaying Information & Animation

C1 — Four ways to show and hide information

Each pattern below solves the same underlying problem — showing some content and hiding the rest until the user asks for it — in a different situation. The JavaScript in every case does the same job: toggle a class or a style property. CSS decides what that toggle actually looks like (a transition, a colour change); JavaScript only decides when it happens.

Accordion

<button class="accordion-toggle">What's included in a veg box?</button>
<div class="accordion-panel" hidden>
  <p>Six seasonal vegetables, sourced within 30 miles of our farm shop.</p>
</div>

document.querySelector(".accordion-toggle").addEventListener("click", (e) => {
  const panel = e.target.nextElementSibling;
  panel.hidden = !panel.hidden;
});

nextElementSibling gets the panel immediately after the button that was clicked, so this same code pattern works for any accordion item without needing to know its specific content in advance.

Tabs

<div class="tabs">
  <button class="tab-btn" data-tab="delivery">Delivery</button>
  <button class="tab-btn" data-tab="returns">Returns</button>
</div>
<div id="delivery" class="tab-panel">We deliver every Thursday.</div>
<div id="returns" class="tab-panel" hidden>Let us know within 48 hours.</div>

document.querySelectorAll(".tab-btn").forEach((btn) => {
  btn.addEventListener("click", () => {
    document.querySelectorAll(".tab-panel").forEach((panel) => (panel.hidden = true));
    document.querySelector("#" + btn.dataset.tab).hidden = false;
  });
});

A data-tab attribute links each button to the panel it should reveal — the click handler hides every panel, then un-hides just the one the clicked button names.

Modal box

<button id="open-modal">View size guide</button>
<div id="modal" hidden>
  <p>Small box: feeds 1–2. Large box: feeds 3–4.</p>
  <button id="close-modal">Close</button>
</div>

const modal = document.querySelector("#modal");
document.querySelector("#open-modal").addEventListener("click", () => (modal.hidden = false));
document.querySelector("#close-modal").addEventListener("click", () => (modal.hidden = true));

A real modal is usually also styled (CSS) to sit fixed on top of the page with a dimmed backdrop — the JavaScript here only controls whether it's visible, not its positioning.

Information filtering

<input id="filter-input" placeholder="Filter products…">
<ul id="product-list">
  <li>Organic Carrots</li>
  <li>Organic Kale</li>
  <li>Free-Range Eggs</li>
</ul>

document.querySelector("#filter-input").addEventListener("input", (e) => {
  const term = e.target.value.toLowerCase();
  document.querySelectorAll("#product-list li").forEach((item) => {
    item.hidden = !item.textContent.toLowerCase().includes(term);
  });
});

The input event fires on every keystroke, re-checking each list item against the current search text and hiding the ones that no longer match.

Hover effects, transitions, an animated logo, and motion

These four are CSS's job, not JavaScript's — no click or keystroke is involved, so there's no event to handle:

.logo {
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.1) rotate(-3deg);
}

:hover applies a style only while the mouse is over the element; transition makes the change animate smoothly over 0.3 seconds instead of jumping instantly. Applied to a logo, this is a simple, common way to add a small, deliberate piece of motion without writing any JavaScript at all.

Common mistake

Forgetting to give the hidden state an actual starting value — if a panel/modal isn't marked hidden (or an equivalent CSS rule) in the HTML to begin with, the JavaScript's toggle logic has nothing correct to toggle from, and the element shows up on page load when it shouldn't.

Task

Build one accordion, one tab set, one modal box and one filterable list for your own site — reusing the same event-handling pattern each time, adapted to what that pattern needs to show or hide. Add a hover transition to your own logo or another key element.