Programmatically restore a calcite panel that was dismissed

[LefterisKoumis]

I am using a panel that would like  programmatically reverse the status set by using the dismissible and dismissed properties.

If use the dismissible property and the x is clicked, wanted to programmatically restore the panel visibility.

<calcite-panel dismissible id="X">
          <div slot="header-content">Test</div>          

Tried:

document.getElementById("X").style.display = 'block'   

Also, if the panel is originally hidden

<calcite-panel dismissed id="X">
          <div slot="header-content">Test</div>          

Tried

document.getElementById("X").style.display = 'block'   

and

 document.getElementsByTagName("calcite-panel").dismissed = false

[BenElan · Accepted solution]

Using the dismissed property is the correct approach. Here is a codepen:

https://codepen.io/benesri/pen/wvyBgZV?editors=1000