Less scrolling
Readers see the full list of topics first, then open one panel instead of scanning a wall of text.
Content Creation
Accordion for SharePoint
Turn long intranet pages into short, scannable answers.
Accordion is a SharePoint Framework web part that groups page content into collapsible panels. Readers open only the section they need, and every panel is operable by keyboard and screen reader.
Interactive preview
A working example of the panel behaviour, using our own solution catalogue as the content. Select a heading to expand it.
SharePoint Framework (SPFx) solutions
Intranet hubs, custom web parts, forms, and dashboards for SharePoint Online, including Microsoft Graph and third-party integration. Accordion is one of ten Content Creation web parts in the catalogue.
AI solutions for Microsoft 365
Intelligent assistants, automation, and AI-driven productivity experiences built into the Microsoft 365 tools your teams already use. Explore AI Solutions.
Microsoft Teams bots
Employee self-service, approval and ticketing assistants, and notification bots, with secure bot identity, role, and telemetry setup. See Teams bot services.
Office Add-ins and custom software
Excel, Word, and Outlook add-ins plus requirement-based development covering discovery, API-first backends, and secure cloud delivery. Request a custom solution.
The Accordion web part behaves exactly like this on a SharePoint page, with a choice of selectable panel styles and your own content in place of ours.
Why teams use it
Why teams choose Accordion
Accessible by default
Keyboard operation, screen reader announcements, and focus behaviour are built in, so authors cannot accidentally publish an inaccessible page.
No developer needed
Site owners add the web part and edit panels directly on the page. No custom code or scripts to maintain.
Content stays findable
Collapsed panels remain in the page markup, so search, find-in-page, and printing still return the complete content.
Capabilities
What Accordion does
- Unlimited panels
- Add as many sections as a page needs, each with its own heading and content.
- Rich panel content
- Combine formatted text, images, links, and embedded media inside any panel.
- Single or multi-open behaviour
- Choose whether opening one panel closes the others, or readers can expand several at once.
- Deep linking
- Share a URL that opens the page with a specific panel already expanded, so support answers can be linked directly.
- Configurable heading levels
- Set the heading level used by panel titles so the page keeps a logical heading outline.
- Selectable panel styles
- Pick from built-in panel styles so the accordion matches the tone of the page, from a compact list to clearly separated cards.
- Theme aware
- Inherits your SharePoint site theme colours, fonts, and spacing automatically.
Accessibility conformance
Accordion is developed and tested against WCAG 2.2 AA and is suitable for inclusion in an accessibility conformance report.
- Each panel header is a real button, reachable and operable with Tab, Enter, and Space.
- Expanded and collapsed state is announced through
aria-expandedandaria-controls. - Focus indicators meet the 3:1 non-text contrast requirement and are never hidden behind sticky headers.
- Interactive targets are at least 24 by 24 CSS pixels, satisfying Target Size (Minimum).
- Expand and collapse animation is disabled when the visitor prefers reduced motion.
In practice
Where teams use it
Policy owners
Policy and procedure libraries
Publish each clause as its own panel so employees jump straight to the rule they were asked about, instead of reading the full document.
Human resources
Onboarding pages
Group new-hire information by stage. Week one stays open while later stages remain available but out of the way.
IT service desk
Knowledge base articles
Break troubleshooting into ordered steps and link an agent directly to the panel that resolves the ticket.
Communications
Intranet FAQ sections
Keep frequently asked questions on a landing page without pushing other announcements below the fold.
Live demo
See it in action
The example below runs on this page and behaves the same way the web part does on a SharePoint page.
IT support
How do I connect to the VPN?
Open the company VPN client, sign in with your work account, and approve the multifactor prompt.
My mailbox is full
Archive items older than two years, then empty the deleted items folder to release the quota.
Requesting software
Licensed software is requested through the service catalogue and approved by your manager.
Reporting a phishing email
Use the Report Message button in Outlook. Do not forward the message to colleagues.
Demonstration content only.
Screenshot placeholder Author configuration pane in SharePoint. Image to be supplied.
Screenshot placeholder Published page on desktop and mobile. Image to be supplied.
Environment
Compatibility and requirements
Items marked To be confirmed are pending final product documentation and are not a statement of support.
| Microsoft 365 | Any Microsoft 365 subscription that includes SharePoint Online. |
|---|---|
| SharePoint | SharePoint Online modern pages, including communication sites and team sites. SharePoint Server support: To be confirmed |
| Microsoft Teams | To be confirmed Availability as a Teams tab has not yet been published. |
| SPFx version | To be confirmed Supplied with the release notes for your package version. |
| Browsers | Current versions of the browsers supported by Microsoft 365 on Windows, macOS, iOS, and Android. |
| Devices | Desktop, tablet, and mobile. Layouts reflow for narrow screens. |
| Permissions to install | A SharePoint administrator uploads the package to the tenant app catalogue. Site owners then add the web part to a page. |
| API permissions requested | To be confirmed The permission set requested at deployment is listed in the installation guide. |
| Other requirements | No server-side components, database, or additional licences beyond your existing Microsoft 365 subscription. |
Trust
Security and privacy
Accordion runs inside your tenant as a SharePoint Framework solution and follows the permissions already assigned to each page.
Data handling
Content and settings are stored with the page in SharePoint. The web part does not create a separate data store.
External services
The web part renders content from your own tenant. Any external service is one your authors choose to embed.
API permissions
Permissions requested at deployment are listed in the installation guide and approved by an administrator before use. Details to be confirmed
Tenant and access control
Content inherits SharePoint permissions. Readers see it only if they can already open the page it sits on.
Getting started
From order to published page
Purchase
Send us your tenant details and user count. We confirm licensing and issue the package and licence key.
Install
A SharePoint administrator uploads the package to the tenant app catalogue and approves the requested permissions.
Configure
Site owners add the web part to a modern page and set its options in the property pane.
Use
Authors edit the content while editing the page. Changes publish with the page, with no further deployment.
Licensing
Pricing and licensing
Licences are issued per tenant. Final figures depend on your user count, so we confirm them on your quote.
Annual
Standard
Price on request
Billed yearly, per tenant
- Accordion web part for one tenant
- Product updates during the term
- Email support
- Product documentation
Most complete
Annual
Enterprise
Price on request
Billed yearly, per tenant
- Everything in Standard
- Priority support response
- Accessibility conformance summary
- Deployment assistance session
One-time
Lifetime licence
Price on request
Single payment, per tenant
- Perpetual right to use the current version
- Updates for a defined period
- Email support
- Product documentation
| Included | Standard | Enterprise | Lifetime licence |
|---|---|---|---|
| Accordion web part | Included | Included | Included |
| Licence scope | One tenant | One tenant | One tenant |
| Term | 12 months | 12 months | Perpetual |
| Product updates | During term | During term | To be confirmed |
| Email support | Included | Included | Included |
| Priority support response | Not included | Included | Not included |
| Accessibility conformance summary | Not included | Included | On request |
| Deployment assistance session | Not included | Included | Not included |
| Price | On request | On request | On request |
Your package
What you receive
Product
The Accordion SPFx package, ready to upload to your tenant app catalogue.
Updates
Fixes and improvements released during your licence term, with release notes for each version.
Support
Email support for installation, configuration, and troubleshooting questions.
Documentation
Installation, configuration, and author guidance written for SharePoint administrators and site owners.
Licence
A tenant licence key and the licence terms for your records and procurement review.
Accessibility evidence
A conformance summary covering WCAG 2.2 AA testing, available for your accessibility reporting.
Guidance
Documentation
Documentation is delivered with your licence. Request a copy in advance if you need it for a procurement or security review.
Installation guide
App catalogue upload, permission approval, and rollout to site collections.
Provided with your licence
User guide
Adding panels, ordering content, and publishing changes as a site owner or author.
Provided with your licence
Configuration guide
Panel behaviour, heading levels, default open state, and deep-link options.
Provided with your licence
FAQ and troubleshooting
Common questions are answered on this page. For anything else, our team responds directly.
Open FAQ and troubleshootingAnswers
Frequently asked questions
How is Accordion installed?
The solution is packaged as an SPFx app. A SharePoint administrator uploads it to the tenant app catalogue and approves the requested permissions. Site owners can then add the web part to any modern page.
Does it work on every SharePoint site?
It works on modern SharePoint Online pages, including communication sites and team sites. Support for SharePoint Server has not been published and is still to be confirmed.
Can several panels be open at the same time?
Yes. Authors choose between accordion behaviour, where opening one panel closes the others, and independent behaviour, where every panel toggles on its own.
Can I link directly to one panel?
Yes. Deep linking lets you share a URL that opens the page with a specific panel already expanded, which is useful for support answers and policy references.
Does the content remain available to search?
Collapsed panels stay in the page markup, so SharePoint search, browser find-in-page, and print output all include the full content.
Is it accessible for keyboard and screen reader users?
Yes. Panel headers are real buttons operated with Tab, Enter, and Space, state is exposed through aria-expanded and aria-controls, and the product is tested against WCAG 2.2 Level AA.
Where is our content stored?
Panel titles and content are stored with the SharePoint page. The web part does not create a separate database and inherits the page's existing permissions.
How is the product licensed?
Licences are issued per tenant, either annually or as a lifetime licence. Pricing depends on your user count and is confirmed on your quote.
What support is included?
Every licence includes email support for installation, configuration, and troubleshooting. The Enterprise plan adds a priority response target.
A panel is not expanding. What should I check first?
Confirm the page is published rather than in edit mode, that the web part version matches the package in your app catalogue, and that no site-level script blocks the web part. If it persists, contact support with the page URL and browser details.
Bring Accordion to your SharePoint sites
Tell us about your environment and we will confirm licensing, rollout steps, and an accessibility conformance summary for your records.