Show, Hide, Fade & Slide

$("#banner").hide();          // sets display: none
$("#banner").show();          // restores the element's normal display value
$("#banner").toggle();        // hide if visible, show if hidden
$("#banner").toggle(isOpen);  // show when true, hide when false

// Plain JavaScript: the hidden attribute
const banner = document.querySelector("#banner");
banner.hidden = true;
banner.hidden = false;
banner.hidden = !banner.hidden;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery effects</title>
  <style>
    #notice { background: #fff3c4; border: 1px solid #e0c060; padding: 0.8rem; max-inline-size: 24rem; border-radius: 6px; }
    .controls button { margin: 0.2rem; }
  </style>
</head>
<body>
  <div class="controls">
    <button data-fx="hide">hide()</button>
    <button data-fx="show">show()</button>
    <button data-fx="fadeOut">fadeOut()</button>
    <button data-fx="fadeIn">fadeIn()</button>
    <button data-fx="slideUp">slideUp()</button>
    <button data-fx="slideDown">slideDown()</button>
    <button data-fx="slowFade">fadeToggle("slow")</button>
    <button data-fx="dim">fadeTo(400, 0.3)</button>
  </div>
  <div id="notice">
    <strong>Exam notice:</strong> Class 12 practical exams in Kochi start on Monday at 9 am.
  </div>
  <p id="status">Click a button.</p>

  <script src="https://cdn.jsdelivr.net/npm/jquery@4.0.0/dist/jquery.min.js"></script>
  <script>
    const $notice = $("#notice");
    const done = (name) => () => $("#status").text(name + " finished");

    $(".controls").on("click", "button", function () {
      const fx = $(this).attr("data-fx");
      $("#status").text(fx + " running...");
      $notice.stop(true, true);                    // finish any running effect first
      if (fx === "hide") { $notice.hide(); done(fx)(); }   // no arguments: instant
      if (fx === "show") { $notice.show(); done(fx)(); }
      if (fx === "fadeOut") $notice.fadeOut(done(fx));
      if (fx === "fadeIn") $notice.fadeIn(done(fx));
      if (fx === "slideUp") $notice.slideUp(done(fx));
      if (fx === "slideDown") $notice.slideDown(done(fx));
      if (fx === "slowFade") $notice.fadeToggle("slow", "linear", done(fx));
      if (fx === "dim") $notice.fadeTo(400, 0.3, done(fx));
    });
  </script>
</body>
</html>

async function closeAlert() {
  await $("#alert").fadeOut(300).promise();
  $("#alert").remove();
  $("#next-step").fadeIn();
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and details</title>
  <style>
    .toast { opacity: 0; translate: 0 0.5rem; transition: opacity 0.3s, translate 0.3s; background: #1f3b57; color: #fff; padding: 0.7rem 1rem; border-radius: 6px; inline-size: fit-content; }
    .toast.visible { opacity: 1; translate: 0 0; }

    details { border: 1px solid #ccc; border-radius: 6px; padding: 0.4rem 0.8rem; margin: 0.4rem 0; max-inline-size: 26rem; }
    summary { cursor: pointer; font-weight: bold; }
  </style>
</head>
<body>
  <button id="save">Save profile</button>
  <p class="toast" id="toast" role="status">Profile saved for Isha</p>

  <h3>Hostel FAQ (no JavaScript at all)</h3>
  <details name="faq">
    <summary>What time is dinner?</summary>
    <p>Dinner is served from 7:30 pm to 9:30 pm.</p>
  </details>
  <details name="faq">
    <summary>Are visitors allowed?</summary>
    <p>Yes, on Sundays between 10 am and 5 pm.</p>
  </details>

  <script>
    const toast = document.querySelector("#toast");
    document.querySelector("#save").addEventListener("click", () => {
      toast.classList.add("visible");
      setTimeout(() => toast.classList.remove("visible"), 2000);
    });
  </script>
</body>
</html>

const box = document.querySelector("#notice");
const fade = box.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 400, easing: "ease-in" });
await fade.finished;
box.hidden = true;