Programmatically restore a calcite panel that was dismissed

LefterisKoumis — Mon, 02 May 2022 21:21:54 GMT

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

Re: Programmatically restore a calcite panel that was dismissed

BenElan — Mon, 02 May 2022 22:06:27 GMT

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