Collapsible Section Label Based on State

Hello
I have a section that is collapsible but the label has to change based
on the state of the section - any suggestions on how I can implement it
using Appian's built-in features.

I can do it using richTextField but then I can't seem to emulate the
slow animation that Appian's default code does. So, two questions:
Is there a way to change labels based on the state or
Is there a way to emulate the slow animation of the arrow if I create
the section label using richTextField.
a!sectionLayout(
if (sectionIsCollapsed, label:"Show Details", label: "Hide Details")
is it possible to code the slow animation of the arrow as Appian does here?
label:"Show Details", logic to change text to display based on the
state of the section 

Thank you for your assistance

M

a!localVariables(
  local!isExpanded: false(),
  a!sectionLayout(
    label: "Outer Section",
    isCollapsible: true,
    contents: {
      a!richTextDisplayField(
        value: {
          a!richTextIcon(
            linkStyle: "STANDALONE",
            icon: if(
              local!isExpanded,
              "ANGLE-DOWN-BOLD",
              "ANGLE-RIGHT-BOLD"
            ),
            link: a!dynamicLink(
              saveInto: {
                a!save(local!isExpanded, not(local!isExpanded))
              }
            )
          ),
          a!richTextItem(
            linkStyle: "STANDALONE",
            text: if(
              local!isExpanded,
              "Hide Details",
              "Show Details"
            ),
            link: a!dynamicLink(
              saveInto: {
                a!save(local!isExpanded, not(local!isExpanded))
              }
            ), 
          )
        }
      ),
      a!sectionLayout(
        contents: {
          a!richTextDisplayField(
            value: { a!richTextItem(text: "Peek-A-Boo") },
          )
        },
        showWhen: local!isExpanded
      )
    }
  ), 
)