Way to club webparts as Tabs or Accordions

[spverma03]

Sample description

Is there any way to load OOB or custom web parts as Tabs or Accordions? The use case here is to show multiple webparts in one view so that to save space on the page. For example, configure multiple news webparts for different department sites. Then club those department news webparts in one webpart as tabs and show on organization portal.

It was possible in classic pages and maybe in old SPFx versions, but is there any recommended way in Modern Pages?

SPFx version

No response

Are you willing to help?

Yes

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[Abderahman88]

Hi @spverma03,

Yes, it's possible. You can use @pnp/sp-dev-fx-controls-react controls for example.

Another possibility, is to put Quick Links on the portal and redirect to the sitecollection of each department with their news.

[spverma03]

@Abderahman88

Thank you for your quick response. These do not fulfill requirements. We need a way to load SP Modern Web-parts inside tabs/accordion.

Also, the second option (Quick Links) is not relevant as the primary requirement is to show news at one place instead of re-directing users to different page/site.

Something similar to this but in modern it seems not possible: https://www.paitgroup.com/blog/sharepoint-tabbed-web-partshillbillytabs-3-0

[Abderahman88]

@spverma03 Standard webparts can not be loaded inside tabs/accordion. You need to create a custom news webpart.

Update: new feature - collapsible sections

[PathToSharePoint]

Modern SharePoint recently added collapsible sections, which should address your requirement to "save space on the page.".

I am the author of the original "Easy Tabs Web Part" for classic pages, and AFAIK nothing equivalent has been done in modern.

[Abderahman88]

@spverma03 Collapsible sections is in roll out phase. Maybe you can already use it.

An example is as below (this is without the collapsible sections, because it's not active on my tenant)

[spverma03]

So what I understand is:

1. Accordion - Collapsible sections can be used, but it will take full width on page. We cannot make accordion for specific zones.

2. Tabs - This is not possible currently and we need to create custom webpart. The pain here would be to create property-pane. OOB webparts are having nice property pane settings and not all code/API etc are exposed for customizations. It will be difficult to provide features same as OOB webpart inside a custom webpart. The OOB webparts set a high expectation to end-users and they demand similar experience in custom webparts as well.

I would appreciate if someone can help with some sort of compatibility with Tabs as well.

Query: The roadmap mentions tabs as well. Is it anyway going to come because I can see only Accordion view in the demo videos. I do not have this feature yet in my tenant.

SharePoint: Collapsible sections on modern pages

You’ll have the ability to show page sections in an accordion view (collapsed or expanded) or as tabs. The accordion view will be collapsed by default, but can be set to show expanded.

[hugoabernier]

Converted this topic to a conversation. Let's keep this topic going!