Collapse

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"
    )
  }
)

1. Thank you Rishikesh I was exactly looking like this.

1. Thank you Rishikesh I was exactly looking like this.