How do I make a Foundry Slate container collapsible?

Question

I want to make a Slate dashboard that has collapsible containers that I've seen elsewhere, but I don't know which CSS styling to apply.

Can someone help me understand how to accomplish this?

Answer 1

The basic strategy is to set the container's height to 0px and its overflow to hidden when its parent has a certain class. In other words, add a conditional class to the parent container, like {{#if w_toggle.on}}hide-me{{/if}}, and then add CSS that looks like

.hide-me {  
  #widget-w_child_container {    
    height: 0px !important;     
    overflow: hidden;   
  }
}

For more advanced styling and layout techniques, find the UX/UI Considerations portion of the Slate Development Best Practices guide in the documentation.