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:

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Add ID to the Tabs Design Element
  • Step 2: Copy the Code
  • Step 3: Paste the Code on your page
  • Step 4: Save

Prerequisites

• 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:

Then, go to the Custom CSS tab:

Copy the text below:

all-tabs-collapsed-by-default

Then, paste it in the ID field:

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

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.

Then, click Paste:

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

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:

• How to Automatically Rotate ShortPoint Tabs Every Few Seconds Using Code Design Element
• How to Make Single Tabs in Tabs Design Element Equal and Full Height
• How to Display the Multiple Hyperlinks in ShortPoint List