Use listeners to toggle visibility.
We might also want to show some tag only when the show button is pressed and hide it otherwise.
Such code will look like this: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20events/ex18.js?actionable=true
Likewise, we can change the color of the hide button only when the mouse is held and revert back to its original color when the mouse is released. https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20events/ex19.js?actionable=true
We can hide our button when its pressed and held. The following code does not need the mouseup() function: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20events/ex20.js?actionable=true
$(document).ready(function(){
XT1
});
</script>
Live demo
<div id="minidivpage" class="example-live"><div class="w-row"><div class="w-clearfix w-col w-col-1"><h1 id="counter-value" class="heading-6">0</h1></div><div class="w-col w-col-2"><a id="counter" href="#" class="button-2 w-button">Hide</a></div><div class="column-2 w-col w-col-9"><div id="hidden-text" class="box">Password Hidden text</div></div></div></div>
$(document).ready(function() {
XT1
});
</script>
