How To Change Color Of Accordion In Sharepoint

Changing the color of the accordion in Sharepoint can be achieved through a few alternative methods. Currently, there is no built-in way to do this in the modern experience, but there are workarounds you can try to customize the design of your Sharepoint site.

One suggestion is to use SP2013 and link to the accordion view there. Another option is to use SharePoint Framework (SPFx) to add a jQueryUI accordion. These methods may require some coding and CSS customization, but they can help you achieve the desired color changes.

It’s worth noting that there are future developments in the works for accordion customization in Sharepoint. Collapsible sections for modern pages are expected to be introduced soon, which could provide even more flexibility in customizing the accordion’s color. However, there may be limitations and issues with these collapsible sections, such as font size and anchor/bookmarks not working properly. Keeping an eye on the SharePoint roadmap for updates on this feature is recommended.

Although changing the color of the accordion in Sharepoint may require some workaround and customization at present, the future looks promising with the potential introduction of collapsible sections for modern pages. Stay tuned for more updates and enhancements to make your Sharepoint site truly stand out.

Workarounds to Change Color of Accordion in Sharepoint

If you want to change the color of the accordion in Sharepoint, there are a few workarounds you can try. Currently, there is no built-in way to do this in the modern experience, but don’t worry, we’ve got some options for you to explore.

Using SP2013

One workaround suggestion is to use SP2013 and link to the accordion view there. While this might not be ideal if you’re already using a modern Sharepoint site, it can be a viable option if you have access to an SP2013 environment. By linking to the accordion view in SP2013, you can utilize the color customization options available in that version.

SharePoint Framework (SPFx)

Another workaround option is to use SharePoint Framework (SPFx) to add a jQueryUI accordion. This method may require some coding and CSS customization, but it provides more flexibility in terms of design customization. By leveraging SPFx, you can create a custom accordion with the desired color scheme and style it to match your Sharepoint site’s branding.

It’s important to note that both of these workarounds involve some additional steps and potential complexities. It’s recommended to have a good understanding of Sharepoint customization and development before attempting these workarounds. Additionally, always test any customizations thoroughly to ensure they work as expected.

Keep in mind that there are some exciting developments on the horizon for accordion customization in Sharepoint. According to some sources, collapsible sections for modern pages are coming soon. While these sections may offer a more streamlined solution for changing accordion colors, there may still be limitations and issues to consider, such as font size and anchor/bookmarks not working properly. Be sure to stay updated with the SharePoint roadmap for the latest information on this feature.

Workaround Description
Using SP2013 Link to the accordion view in SP2013 to leverage color customization options.
SharePoint Framework (SPFx) Add a jQueryUI accordion using SPFx for more flexibility in design customization.

Can I use the same method to add custom CSS to change the color of an accordion in SharePoint?

Yes, you can use the same method of adding custom CSS to SharePoint to change the color of an accordion. By targeting the specific accordion element with CSS selectors and applying the desired color properties, you can easily customize its appearance within SharePoint.

Future Developments for Accordion Customization in SharePoint

SharePoint is continuously evolving, and soon there may be more options available for customizing the color of the accordion. According to sources, collapsible sections for modern pages are in the pipeline and expected to be introduced in the near future. This will provide users with a more intuitive and user-friendly way to organize content on their SharePoint sites.

However, it’s important to note that there may be some limitations and issues with these collapsible sections. Some potential challenges include font size discrepancies and anchor/bookmarks not functioning properly within the collapsible sections. As with any new feature, it is recommended to keep a close eye on the SharePoint roadmap for updates on these developments.

In the meantime, if you’re looking to change the color of the accordion in SharePoint, there are a couple of workarounds you can try. One option is to utilize SP2013 and link to the accordion view from there. Although this may require some additional steps, it can provide a solution for those who prefer a specific color scheme for their accordions.

Another workaround is to leverage the SharePoint Framework (SPFx) and add a jQueryUI accordion. This approach might involve some coding and CSS customization, but it allows for greater flexibility in customizing the design and color of the accordion.

Meet the Author

Abdul Rahim has been working in Information Technology for over two decades. Learn how Abdul got his start as a Tech Blogger , and why he decided to start this Software blog. If you want to send Abdul a quick message, then visit his contact page here.