Programmatically restore a calcite panel that was dismissed

119
1
Jump to solution
05-02-2022 02:17 PM
LefterisKoumis
Regular Contributor

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

 

0 Kudos
1 Solution

Accepted Solutions
BenElan
Esri Contributor
0 Kudos
1 Reply
BenElan
Esri Contributor

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

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

0 Kudos