Forum Discussion
Adaptive card with accordion (Expand/Collapse) not working on Teams
Accordion Expand/collapse not working on Teams, same used to work before and now it stopped. Below is the JSON used. Please suggest.
I have tried with adaptive card versions 1.0,1.2,1.3,1.5, none of them works.
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Headline 1",
"wrap": true,
"size": "Medium"
}
],
"width": "stretch"
},
{
"type": "Column",
"id": "chevronDown1",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto",
"isVisible": false
},
{
"type": "Column",
"id": "chevronUp1",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
],
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cardContent1",
"chevronUp1",
"chevronDown1"
]
}
},
{
"type": "Container",
"id": "cardContent1",
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Content for headline 1",
"isSubtle": true,
"wrap": true
}
]
}
]
}
],
"separator": true,
"spacing": "Medium"
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Headline 2",
"wrap": true,
"size": "Medium"
}
],
"width": "stretch"
},
{
"type": "Column",
"id": "chevronDown2",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronUp2",
"isVisible": false,
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
],
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cardContent2",
"chevronUp2",
"chevronDown2"
]
}
},
{
"type": "Container",
"id": "cardContent2",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Content for headline 2",
"isSubtle": true,
"wrap": true
}
]
}
]
}
],
"separator": true,
"spacing": "Medium"
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Headline 3",
"wrap": true,
"size": "Medium"
}
],
"width": "stretch"
},
{
"type": "Column",
"id": "chevronDown3",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/down.png",
"width": "20px",
"altText": "collapsed"
}
],
"width": "auto"
},
{
"type": "Column",
"id": "chevronUp3",
"isVisible": false,
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/up.png",
"width": "20px",
"altText": "expanded"
}
],
"width": "auto"
}
],
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cardContent3",
"chevronUp3",
"chevronDown3"
]
}
},
{
"type": "Container",
"id": "cardContent3",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Content for headline 3",
"isSubtle": true,
"wrap": true
}
]
}
]
}
],
"separator": true,
"spacing": "Medium"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."
}
5 Replies
- Meghana-MSFTBronze ContributorWe will check this at our end and get back to you. thanks!