Adding Collapsible Sections on your modern SharePoint page

This is another new feature that I’ve been watching for, as it’ll allow for some great page design techniques to reduce visual overload. It’s the ability to create collapsible sections on your modern SharePoint page. Here’s how it works…

Create a new section on your page as you normally would:

When I edit the section properties, I have the options Make the section collapsible, Show divider lines between sections, Expand/collapse icon alignment, and Default display (how the section expands or collapses by default):

Where it says Section name, I can add a custom title for that collapsible section. I also clicked the Plus icon to add a text web part for content in that section:

Here’s my finished collapsible section with a title and some text, set to open in a collapsed state:

Here’s what my page looks like once it’s published, and I can click on the Expand icon to show what’s in the collapsed area:

And here’s the page with the section expanded:

A small hint… If you add collapsible sections without titles, people may not know that there’s hidden content. Be sure you make it obvious that there’s content that needs to be expanded.