Author Details

avatar-teacher

Evolvous

We are a team of tech enthusiast and this section is where we love to share our experience and our knowledge. We try our best to help you understand technical topics by giving you live instances of how-to’s, guides, tips, FAQ’s and troubleshoots.

If you like it or have questions, do share your feedback in the comments section below.

Accordion Style FAQ (Frequently Asked Questions) in SharePoint

Introduction:

Accordion Style FAQ in SharePoint. This feature dynamically expands and presents the answer underneath when you click on a question.

Accordion Style FAQ (Frequently Asked Questions) in SharePoint - Evolvous

Step 1:

Create a SharePoint list. And create a list column as below.

Title: Single Line Text

Question: Single Line Text

Answer: Multi Line Text (Plain text)

ShowMore: Single Line Text

Accordion Style FAQ (Frequently Asked Questions) in SharePoint - Evolvous

Step 2:

Apply a Group by on the Question column in your view.

Apply a Group by on the Question column in your view - Evolvous

Step 3:

Now format the view and apply the below JSON code to get the Accordion style.

Now format the view and apply the below JSON code to get the Accordion style - Evolvous

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"hideListHeader": true,
"groupProps": {
"headerFormatter": {
"elmType": "div",
"attributes": {
"class": "sp-row-card"
},
"style": {
"color": "black",
"background-color": "#FAF9F9",
"flex-grow": "1",
"display": "flex",
"flex-direction": "row",
"box-sizing": "border-box",
"padding": "4px 8px 5px 8px",
"border-radius": "6px",
"align-items": "center",
"flex-wrap": "nowrap",
"overflow": "auto",
"margin": "1px 4px 4px 1px"
},
"children": [
{
"elmType": "img",
"style": {
"max-width": "24px",
"max-height": "24px",
"margin-top": "2px",
"border-radius": "2px"
}
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"padding": "5px 5px 5px 5px",
"font-weight": "500",
"font-size": "15px"
},
"txtContent": "@group.fieldData.displayValue"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"justify-content": "center"
}
}
]
}
]
}
},
"rowFormatter": {
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeLighterAlt"
},
"style": {
"justify-content": "start",
"color": "ms-fontColor-Primary",
"display": "flex",
"padding": "1px 8px 5px 20px",
"border-radius": "6px",
"max-width": "905px",
"margin": "1px 4px 4px 60px"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "left",
"font-weight": "400",
"font-size": "15px"
},
"children": [
{
"elmType": "span",
"style": {
"margin-top": "8px",
"padding-left": "1px",
"color": "black"
},
"attributes": {
"class": "ms-fontSize-m",
"iconName": "Lightbulb"
}
},
{
"elmType": "span",
"attributes": {
"class": "sp-row-listPadding"
},
"txtContent": "Answer",
"style": {
"font-weight": "500",
"color": "black",
"padding-left": "4px"
}
},
{
"elmType": "div",
"attributes": {
"class": "sp-row-listPadding"
},
"txtContent": "[$Answer]",
"style": {
"flex-grow": "1",
"display": "flex",
"flex-direction": "column",
"flex-wrap": "nowrap",
"align-items": "center",
"max-width": "900px",
"min-width": "205px",
"margin-top": "8px",
"margin-bottom": "8px"
}
},
{
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"txtContent": "Show more",
"attributes": {
"class": "sp-row-button"
},
"style": {
"display": "=if([$ShowMore] == 'Yes', 'block', 'none')",
"margin-bottom": "8px",
"color": "white",
"background-color": "#0077DB"
}
}
]
}
]
}
}

=====
Plus read
A Guide to Creating Workspaces in Power BI

Advanced UI design in PowerApps using HTML