I’m working on an opeanseadragon zoomify project and added the HTMLelements.js plugin, allowing me to add “annotations” to the zoomed image (See the pink polygon in the sample below:
)

I want to add a button to switch these annotations on and off, but for the love of good can’t turn my head around how to do it.

The textbox that I want to toggle on and off looks like this:

      var hEl = viewer.HTMLelements()
      var textbox2 = document.createElement('div')
      textbox2.style.backgroundColor = 'rgba(255,0,255,1)'
      textbox2.style.border = 'solid 1px black'
      textbox2.style.borderRadius = '1px'
    
      textbox2.innerHTML =
        'TEST TEST '

           hEl.addElement({
            id: 'textbox2',
            element: textbox2,
            x: 230,
            y: 320,
            width: 400,
            height: 250,
            fontSize: .2
      });

Now I understand it’s not a simple CSS DIV but a DIV created on-the-fly by the javascript. What would be the appropriate way to toggle / switch the visibility of this textbox on and off? As I have multiple of these boxes I want to switch off and on at the same time my Idea was to put the entire Javascript snippets above in a <DIV> switching the DIV on and off didn’t work.

Any help is highly appreciated!
THANKS A LOT!

[Codepen link here](https://codepen.io/zapallar/pen/oNREYjP)