How can I implement a show/hide functionality in the popup.html of a Google Chrome Extension?

How can I implement a show/hide functionality in the popup.html of a
Google Chrome Extension?

I'd like to show/hide text...I understand the minimum basics of Manifest 2
and have successfully implemented a javascript dropdown menu that uses an
eventlistener...
This simple code works when I open popup.html in Google as a website. It
doesn't work in the actual extension (clicking the logo).
I think I need a listener or similar for security reasons...but don't know
how to make it work.
The goal is to be able to show/hide blocks of text visible in the
popup.html page that appears when you click the extension's logo/button in
Chrome. Any help deeply appreciated...
HTML:
<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>Hello world</h1></div>
JS:
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}