jQuery Show and Hide
Use an explicit open flag and expose the same state through aria-expanded.
How it works
hide and show change display without removing the element. toggle can also take an explicit boolean, which is clearer than blindly inverting presentation when another value owns the state. This example keeps one open flag and updates both the panel and its controlling button. The panel contains explanatory text rather than a second set of interactive controls, keeping focus behaviour straightforward. A more complex disclosure must also account for focus inside a panel when it closes.
Run in a separate local browser lab
Save this complete HTML source as index.html in an empty folder. Put the pinned full jQuery 4.0.0 file beside it and preserve the MIT licence notice. The document includes its own CSS and JavaScript. Bhylu’s shared website theme does not load jQuery globally.
Open index.html directly in a normal browser. You may also use the optional loopback fixture server with Node 22 if you want the same HTTP setup as the network lessons.
jQuery examples do not run in Bhylu’s current playground: it blocks external libraries and network access. No Apache, MySQL or website configuration change is needed. Review the full-build setup before using Ajax, effects or plugins.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Make Show and Hide Agree With the Control State</title>
<style>
:root {
font:
18px/1.6 system-ui,
sans-serif;
color: #16304e;
background: #fff;
color-scheme: light;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
main {
max-width: 50rem;
margin: auto;
padding: 1.25rem;
}
h1 {
font-size: 1.8rem;
line-height: 1.2;
}
h2 {
font-size: 1.3rem;
}
button,
input,
select,
textarea {
font: inherit;
max-width: 100%;
}
button {
margin: 0.2rem;
padding: 0.4rem 0.7rem;
background: #034fa0;
color: white;
border: 1px solid #034fa0;
border-radius: 0.3rem;
}
button:disabled {
opacity: 0.6;
}
label {
display: block;
margin: 0.5rem 0;
}
input:not([type='checkbox']),
select,
textarea {
display: block;
padding: 0.3rem;
}
a {
color: #034fa0;
}
output {
display: block;
}
article,
section,
fieldset {
padding: 0.75rem;
margin-block: 0.75rem;
border: 1px solid #a9bcd1;
}
ul {
padding-left: 1.5rem;
}
:focus-visible {
outline: 3px solid #0078d4;
outline-offset: 3px;
}
.chosen {
border: 3px solid #0078d4;
}
.highlight {
font-weight: 700;
}
.muted {
opacity: 0.7;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
:root[data-theme='dark'] {
color: #d6e7fb;
background: #061d30;
color-scheme: dark;
}
:root[data-theme='dark'] a {
color: #8ecbff;
}
</style>
</head>
<body>
<main>
<h1>Neighbourhood book swap</h1>
<button id="toggle" aria-controls="notice" aria-expanded="false">
Collection details
</button>
<section id="notice" style="display: none">
<h2>Collection window</h2>
<p>Saturday, 10:00–12:00.</p>
</section>
</main>
<script src="jquery.min.js"></script>
<script>
jQuery(function ($) {
let open = false;
$('#toggle').on('click', function () {
open = !open;
$('#notice').toggle(open);
$(this).attr('aria-expanded', String(open));
});
});
</script>
</body>
</html>
Expected result
The panel opens and closes while aria-expanded follows the same flag.
The CSS display state is not a saved preference or a permission rule. Hiding a panel does not remove its values from a form submission automatically. A native details element may already meet a simple disclosure need without JavaScript; choose the simpler appropriate control. If another feature can change the panel, coordinate through the same state owner instead of reading arbitrary inline styles.
Use jQuery’s official API documentation for exact method and return contracts.