Action.ToggleVisibility

This page documents the Action.ToggleVisibility element, which is an action that toggles the visibility of associated card elements.

Introduced in version 1.2

Important note about accessibility: In version 1.3 of the schema we introduced a label property on Inputs to improve accessibility. If the Host app you are targeting supports v1.3 you should use label instead of a TextBlock as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.

Action.ToggleVisibility

An action that toggles the visibility of associated card elements.

Action.ToggleVisibility Properties

Inherited properties

Example

Action.ToggleVisibility Example (JSON)

{
	"type": "AdaptiveCard",
	"version": "1.2",
	"body": [
		{
			"type": "TextBlock",
			"text": "Press the buttons to toggle the images!",
			"wrap": true
		},
		{
			"type": "TextBlock",
			"text": "Here are some images:",
			"isVisible": false,
			"id": "textToToggle"
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"style": "person",
							"type": "Image",
							"url": "https://picsum.photos/100/100?image=112",
							"isVisible": false,
							"id": "imageToToggle",
							"altText": "sample image 1",
							"size": "medium"
						}
					]
				},
				{
					"type": "Column",
					"items": [

						{
							"type": "Image",
							"url": "https://picsum.photos/100/100?image=123",
							"isVisible": false,
							"id": "imageToToggle2",
							"altText": "sample image 2",
							"size": "medium"
						}
					]
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.ToggleVisibility",
			"title": "Toggle!",
			"targetElements": [ "textToToggle", "imageToToggle", "imageToToggle2" ]
		},
		{
			"type": "Action.ToggleVisibility",
			"title": "Show!",
			"targetElements": [
				{
					"elementId": "textToToggle",
					"isVisible": true
				},
				{
					"elementId": "imageToToggle",
					"isVisible": true
				},
				{
					"elementId": "imageToToggle2",
					"isVisible": true
				}
			]
		},
		{
			"type": "Action.ToggleVisibility",
			"title": "Hide!",
			"targetElements": [
				{
					"elementId": "textToToggle",
					"isVisible": false
				},
				{
					"elementId": "imageToToggle",
					"isVisible": false
				},
				{
					"elementId": "imageToToggle2",
					"isVisible": false
				}
			]
		}
	]
}

Properties

targetElements

The array of TargetElements. It is not recommended to include Input elements with validation under Action.Toggle due to confusion that can arise from invalid inputs that are not currently visible. See /adaptive-cards/authoring-cards/input-validation for more information.

• Type: TargetElement[]
• Required: Yes
• Allowed values:
  • TargetElement
  • string

title

Label for button or link that represents this action.

• Type: string
• Required: No

iconUrl

Optional icon to be shown on the action in conjunction with the title. Supports data URI in version 1.2+.

• Type: uri
• Version: 1.1
• Required: No

id

A unique identifier associated with this Action.

• Type: string
• Required: No

style

Controls the style of an Action, which influences how the action is displayed, spoken, etc..

• Type: ActionStyle
• Version: 1.2
• Required: No
• Allowed values:
  • "default": Action is displayed as normal.
  • "positive": Action is displayed with a positive style (typically the button becomes accent color).
  • "destructive": Action is displayed with a destructive style (typically the button becomes red).

fallback

Describes what to do when an unknown element is encountered or the requires of this or any children can't be met.

• Type: Action, FallbackOption
• Version: 1.2
• Required: No
• Allowed values:
  • Action.Execute, Action.OpenUrl, Action.ShowCard, Action.Submit, Action.ToggleVisibility.
  • "drop": Causes this element to be dropped immediately when unknown elements are encountered. The unknown element doesn't bubble up any higher.

tooltip

Defines text that should be displayed to the end user as they hover the mouse over the action, and read when using narration software.

• Type: string
• Version: 1.5
• Required: No

isEnabled

Determines whether the action should be enabled.

• Type: boolean
• Version: 1.5
• Required: No, default: true

mode

Determines whether the action should be displayed as a button or in the overflow menu.

• Type: ActionMode
• Version: 1.5
• Required: No, default: "primary"
• Allowed values:
  • "primary": Action is displayed as a button.
  • "secondary": Action is placed in an overflow menu (typically a popup menu under a ... button).

requires

A series of key/value pairs indicating features that the item requires with corresponding minimum version. When a feature is missing or of insufficient version, fallback is triggered.

• Type: Dictionary<string>
• Version: 1.2
• Required: No