How can we help you today?

How to Make Tabs Collapsible

This article will showcase how you can make collapsible tabs using a custom code.

Here’s a quick preview of how it will look on your page:

sample collapsible tabs



  • You must have the latest version of ShortPoint SPFx installed on your environment.
  • You must be a ShortPoint Designer with an active license. 
  • You must have an existing Tabs Design Element on your page.

Step-by-step Tutorial

Follow the steps below to get started:

NOTE: Make sure that you already have the Tabs Design Element on your SharePoint page before proceeding with the article. Check out How to Insert a Design Element to learn more about adding Design Elements.

Step 1: Add ID to the Tabs Design Element

Click the Tabs tag and select the cogwheel icon:

cogwheel icon

Then, go to the Custom CSS tab:

Custom CSS tab

Copy the text below:


Then, paste it in the ID field:

ID field

Once done, click the green check mark to apply the changes:

Green checkmark

Step 2: Copy the Code

Copy the code below:

[code code_html="%3C!--%20Add%20your%20HTML%20code%20here%20--%3E%20%0A" code_css="%2F*%20Add%20your%20CSS%20code%20here%20*%2F%20%0A" code_js="(function()%20%7B%0A%20%20var%20$%20%3D%20window.shortpoint.dom.lib%3B%0A%20%20$('%23all-tabs-collapsed-by-default%20.shortpoint-active').removeClass('shortpoint-active')%3B%20%20%20%20%0A%7D)()%3B" code="%7B%22html%22%3A%22%3C!--%20Add%20your%20HTML%20code%20here%20--%3E%20%5Cn%22%2C%22css%22%3A%22%2F*%20Add%20your%20CSS%20code%20here%20*%2F%20%5Cn%22%2C%22javascript%22%3A%22(function()%20%7B%5Cn%20%20var%20$%20%3D%20window.shortpoint.dom.lib%3B%5Cn%20%20$('%23all-tabs-collapsed-by-default%20.shortpoint-active').removeClass('shortpoint-active')%3B%20%20%20%20%5Cn%7D)()%3B%22%2C%22showErrors%22%3Afalse%7D" /]

Step 3: Paste the Code on your page

Right-click anywhere on your page:

NOTE: You can insert the code anywhere on your page, but we recommend adding it right after your Tabs Design Element.

Right click to see context menu

Then, click Paste:


After pasting the code, your tabs will now look like this:

Collapsed tabs

Step 4: Save

Make sure to hit Save to keep your progress:


That’s it! You now have collapsible tabs on your page. Enjoy trying it out in your own tabs.

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 69 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more