Show and Hide a DIV on Click
A clickable control can show or hide another <div>, but the control should normally be a real <button> rather than a DIV with an onclick attribute. Buttons provide keyboard behavior and control semantics automatically.
Modern click-to-toggle demo Top ↑
<button type="button" id="togglePanel" aria-expanded="false" aria-controls="sub1">Show message</button>
<div id="sub1" hidden>Message</div>Avoid double-click-only controls Top ↑
The historical example required a single click to display and a double click to hide the layer. That behavior is difficult to discover, inconsistent on touch devices and unnecessary for a simple disclosure. One toggle action is clearer.
Original legacy demo Top ↑
Original onclick / ondblclick DIV demo
Show/hide layer using JavaScript Position DIV Hover/focus DIV
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
