If you are new to Adaptive Cards, it may come across that Action.ShowCard and Action.ToggleVisibility seems to do the same thing.

But let’s look at the difference between the two!

To

#	Action	Description
1	ShowCard	Shows or Hides a Card Structure enclosed on ShowCard Action
2	ToggleVisibility	Shows or Hides individual elements based on their IDs

Action.ShowCard

Below is JSON to understand the structure of how ShowCard Action exists and how it will function

1. ShowCard is a standalone ‘Card’ within an Action Element CardAction.
   
   
   
   
2. Now, let’s see how it works. When the Card is not shown, only the button will appear like any other Action button in AdaptiveCards.
   
   
   And when you click on it, the Show Card action will reveal the Card that is structured under it.
   
   

Action.ToggleVisibility

Similarly, let’s look at how ToggleVisibility will work as opposed to Show Card.

1. The JSON structure for ToggleVisibility in ActionSet is as follows –
   Notice that the type: Action.ToggleVisibility
   
   
   
   
2. Now, the “targetElements” in the above Action takes in array of Element IDs which should be toggled for Visibility.
   Since, I’ve mentioned only 1 element in it whose ID is “createdDate“, below is how the element looks and where you can get the ID from –
   
   
   
3. Now, when I click on the button, it’ll consider all the element IDs mentioned in the array to toggle between Show / Hide.
   Before I click the button –
   
   
   
   And when I click on the button, the visibility is toggled to show this time –
   
   
   
4. So as opposed to ShowCard, ToggleVisibility will toggle Show/Hide functionality of selected elements and not a Card structure that resides inside a ShowCard Action.

Placing Action Elements – ShowCard and ToggleVisibility

1. By default, if you select an Action from the Elements menu on the left hand side, they’ll end up in the shown hierarchy.
   
   
   And the JSON for this will appear like this –
   
   The type of Element which resides in Body of the AdaptiveCard itself
   
   
   Zoomed Out, it’ll look like this –
   
   
   
2. However, if you don’t wish to have it under an Action Set in the Body structure, you can place the type of Action whether it is ToggleVisibility or ShowCard in Actions section of the JSON as well.
   
   
   And this will exist in the Actions of the AdaptiveCard JSON and not in the Body as shown above.
   
   
   

Here are some more posts related to Adaptive Cards / Microsoft Teams which you might find useful –

1. Save Adaptive Cards work using VS Code Extension – Adaptive Cards Studio | Quick Tip
2. Adaptive Cards for Outlook Actionable Messages using Power Automate | Power Platform
3. Visualize Adaptive Card for Teams user action within a Cloud Flow | Experimental Feature
4. Adaptive Cards for Teams to collect data from users using Power Automate | SharePoint Lists
5. Admin Center URLs under M365 – Power Platform, Teams, SharePoint, Power BI
6. Tag a User in a Microsoft Teams post made using Power Automate
7. Asynchronous HTTP Response from a Flow | Power Automate
8. Using outputs() function and JSON Parse to read data from missing dynamic value in a Flow | Power Automate

Thank you!!