Show Hide Div with Click and double click

HTML

<div id="my_page2" role="button" tabindex="0">
  Click once to display; double-click to hide
</div>
<div id="sub1" class="my_div">Demo panel</div>

Style

<style>
.my_div {
position: absolute;
left: 400px;
top: 100px;
background-color: #306080;
width: 300px;
padding: 10px;
color: white;
border: #0000cc 2px dashed;
display: none;
}
</style>

JavaScript

const trigger = document.getElementById('my_page2');
const panel = document.getElementById('sub1');

trigger.addEventListener('click', () => panel.style.display = 'block');
trigger.addEventListener('dblclick', () => panel.style.display = 'none');