Collapse

I am not sure I understand what you want to achieve, but you can hide and shoe any component based on any logic. That should allow you to implement what you are looking for.

For more tips, we need way more details.

As we know cardlayout don't have collapsable property as that of boxLayout. But as per your requirement you can try below code, feel free to modify according to you. This is a custom collapsable cardlayout.

a!localVariables(
  local!isOpen: true,
  {
    a!cardLayout(
      contents: a!cardLayout(
        contents: {
          a!sideBySideLayout(
            items: {
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(text: "Attachments", size: "MEDIUM")
                  }
                )
              ),
              a!sideBySideItem(
                item: a!buttonArrayLayout(
                  buttons: {
                    a!buttonWidget(
                      icon: if(
                        local!isOpen,
                        "angle-down-bold",
                        "angle-right-bold"
                      ),
                      saveInto: a!save(local!isOpen, not(local!isOpen)),
                      size: "SMALL",
                      style: "LINK"
                    )
                  },
                  align: "END",
                  marginAbove: "NONE",
                  marginBelow: "NONE"
                ),
                width: "MINIMIZE"
              )
            },
            alignVertical: "MIDDLE"
          )
        },
        style: "STANDARD",
        showBorder: false,
        showShadow: false,
        decorativeBarPosition: "END",
        decorativeBarColor: "#F0F0F0"
      ),
      style: "STANDARD",
      padding: "NONE",
      marginBelow: if(local!isOpen, "NONE", "STANDARD"),
      showShadow: true,
      decorativeBarPosition: "TOP",
      decorativeBarColor: "ACCENT"
    ),
    a!columnsLayout(
      columns: {
        a!columnLayout(width: "EXTRA_NARROW"),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: a!richTextDisplayField(
                value: a!richTextBulletedList(
                  items: a!richTextListItem(
                    text: {
                      a!richTextItem(text: "Document 1"),
                      char(10),
                      char(10),
                      a!richTextItem(text: "Document 2"),
                      char(10),
                      char(10),
                      a!richTextItem(text: "Document 3")
                    }
                  )
                )
              ),
              padding: "NONE",
              showBorder: false,
              showShadow: false,
              decorativeBarPosition: "START",
              decorativeBarColor: "ACCENT"
            )
          }
        )
      },
      showWhen: local!isOpen,
      marginBelow: "STANDARD"
    )
  }
)