Collapsible Container?

How can I create a container with a title, but that is collapsible into the header?

2 Likes

image image

Here are my instructions (from the picture) for adding this to an app:

For this collapsible section, you’ll need to create TWO Container components with names prefixed with collapsible for the general styling. One container will hold the expanded content, then other will be your collapsed view.

Next, add a Toggle component with the name prefixed with collapsibleToggle to each container.

To wire this all up, you’ll create a Temporary State variable to track if the section is expanded or collapsed. Then add a simple Run JS Code Query to toggle the state, such as:

collapsibleSectionState.setValue(!collapsibleSectionState.value);

Trigger this query from both toggle components on open & close.

Finally, set the Hide when true property of both containers to evaluate the variable, i.e. collapsibleSectionState.value so only one container is visible at any given time. Now you can position them on top of one another so it appears the section is expanding & collapsing as the toggle is switched.

Finally, here is the CSS I applied to make the styling “look like” an expanding section (notice I’m overriding all of the “toggle switch” look and replacing with a FontAwesome icon):

/* BEGIN Collapsible Sections */
.retool-widget[class*=" _retool-container-collapsible"] {
  transition: none !important;
}
.retool-widget[class*=" _retool-container-collapsible"]>.retool-container {
  border: 1px solid #D9E0E7 !important;
  border-radius: 0.7rem;
}
.retool-widget[class*=" _retool-container-collapsibleToggle"] .input-control-component__label {
  color: #252525;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 2rem;
  margin-left: -1rem;
}
.retool-widget[class*=" _retool-container-collapsibleToggle"] .input-control-component__input>button {
  background-color: inherit;
  float: right;
}
.retool-widget[class*=" _retool-container-collapsibleToggle"] .input-control-component__input>button:after {
  content: "\f055";
  font-family: "Font Awesome 5 Pro";
  vertical-align: middle;
  font-size: 1rem;
  color: #8492A6;
  position: relative;
  top: inherit;
  left: inherit;
  width: inherit;
  height: inherit;
  background-color: inherit;
  border-radius: inherit;;
  box-shadow: inherit;
  transition: inherit;
}
.retool-widget[class*=" _retool-container-collapsibleToggle"] .input-control-component__input>button.ant-switch-checked:after {
  content: "\f056";
}
/* END Collapsible Sections */
4 Likes

Hey I just want to say a quick thanks for sharing this. It’s people like you that make forums great. You are saving multiple people hours of time… can’t say thanks enough.

2 Likes