Try ShortPoint nowWhen your SharePoint page loads, the Tabs Design Element automatically opens a default tab:
This article will show you how to configure the Tabs Design Element to have no default selection when your page loads:
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have a Tabs Design Element on your SharePoint page.
Step-by-step Tutorial
Follow the steps below to learn how to set up the Tabs Design Element to have no default selection on page load.
Step 1: Edit the ShortPoint Web Part
Go to the SharePoint page you want to use and click Edit:
Close the Toolbox:
Select the ShortPoint tag:
Edit ShortPoint:
Step 2: Edit the Tabs Design Element
NOTEBefore proceeding, make sure you already have a Tabs Design Element on your SharePoint page.
Click the Tabs tag:
Select the cogwheel icon:
Step 3: Add a Class Name
Click the next icon:
Go to the Custom CSS tab:
Write tabs-no-default-selected as the Class name:
Apply your changes:
Step 4: Insert the Code Design Element
NOTEMake sure to insert the Code Design Element below your Tabs Design Element.
Click the plus icon to open the library of Design Elements:
Use the search bar to look for Code and select it:
Step 5: Copy the Codes
Copy the codes below.
HTML Code:
<style id="tabs-no-default-selected-style">
.tabs-not-selected-on-mobile .shortpoint-li.shortpoint-active > .shortpoint-a {
background-color: transparent !important;
color: white !important;
}
.tabs-not-selected-on-mobile .shortpoint-tab-pane.shortpoint-active {
display: none !important;
}
</style>JavaScript Code:
function onElement(selector, stopAfter, callback, root = document) {
const start = Date.now();
const interval = setInterval(() => {
const element = root.querySelector(selector);
if (element) {
clearInterval(interval);
callback(element);
} else if (Date.now() - start >= stopAfter) {
clearInterval(interval);
}
}, 300);
}
// Wait for at least one tab container to appear
onElement(".tabs-no-default-selected", 20000, () => {
// Now select all tab containers
const tabContainers = document.querySelectorAll(".tabs-no-default-selected");
tabContainers.forEach((container) => {
// Wait for the active tab inside each container
onElement(
".sp-type-tab.shortpoint-active",
20000,
() => {
// Find the active tab and pane within this container
const tab = container.querySelector(".sp-type-tab.shortpoint-active");
if (tab) {
tab.classList.remove("shortpoint-active");
tab.removeAttribute("sp-vb-active-child");
tab.querySelector(".shortpoint-tab-title").style.removeProperty("color");
}
const tabPane = document.querySelector(
".shortpoint-tab-pane.shortpoint-active"
);
if (tabPane) {
tabPane.classList.remove("shortpoint-active");
}
// Remove the style element if it exists
const styleElement = document.querySelector("#tabs-no-default-selected-style");
if (styleElement) {
styleElement.remove();
}
},
container // Use the container as the root for querySelector
);
});
});Step 6: Paste Codes
Paste the codes in step 5 in their respective fields.
HTML code in the HTML field:
JavaScript code in the JavaScript field:
Step 7: Disable Sandbox Mode
Navigate to the Design tab:
Disable Sandbox Mode:
Apply changes:
Step 8: Save
Click Save to keep your changes:
That’s it! Now, when you load the page, there is no more automatic tab selection:
Related articles:
