View formattingSharePoint Online

FAQ Accordion

This sample formats your view to appear and work like an Accordion style FAQ (Frequently Asked Questions).

Get this format View on GitHub

Shared by Anand Ragav
Updated Sep 3, 2024

Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Definition

{
  "$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",
        "min-width": "max-content"
      },
      "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"
            }
          }
        ]
      }
    ]
  }
}

{
  "$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",
        "min-width": "max-content"
      },
      "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"
            }
          }
        ]
      }
    ]
  }
}

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

This sample formats your view to appear and work like an Accordion style FAQ (Frequently Asked Questions). This view is responsive.

screenshot of the sample

View requirements

Column Name	Type
Title	Single Line Text
Question	Single Line Text
Answer	Multi Line Text (Plain text)
ShowMore	Single Line Text

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

Sample

Solution	Author(s)
faq-accordion.json	Anand Vadivelan

Version history

Version	Date	Comments
1.0	July 9, 2021	Initial release
1.1	September 3, 2024	Fixed layout corruption caused by updates to SharePoint and Microsoft Lists

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

Whether answers are displayed expanded or collapsed by default can be set in the Group By section of the Edit View screen.

Get this format

How to use this sample

Summary

View requirements

Sample

Version history

Disclaimer

Additional notes

More formats like this

Key Dates Timeline Checklist

Sports Card

Credit / Loyalty Card