How to Make All Links/Hyperlinks in the Accordion Design Element Content Open in a New Tab

If you have a ShortPoint Accordion Design Element added to your SharePoint page, and you are encountering an issue where all your links/hyperlinks in its content are not opening on a new tab despite enabling this setting in SharePoint, then this article is for you.

This article would simply walk you through the process of setting all your links/hyperlinks in your Accordion Design Element to open in a new window with the help of custom JavaScript that we will be applying via ShortPoint Theme Builder.

Let's start! 

TABLE OF CONTENTS

• Before we begin
• Prerequisites
• Step 1. Prepare the Custom JavaScript solution
• Step 2. Apply the Custom JavaScript from the ShortPoint Theme Builder
• Result

Before we begin

• This solution would work for you if you are using ShortPoint SPFx on Office 365 and SharePoint 2019 environment.
• You have ShortPoint installed on your SharePoint site(s). We recommend you to always have the last version installed. Visit our Download ShortPoint page to get the latest version of ShortPoint, or you can use the ShortPoint SPFx Auto Upgrade Feature to ensure you always have the latest version.
• You are a ShortPoint user with an active license.

Prerequisites

• You are using the Accordion Design Element on your SharePoint page.
• You have links/hyperlinks inside your Accordion Design Element. 

Step 1. Prepare the Custom JavaScript solution

To make this happen, we need to use this custom JavaScript we have prepared for the issue:

(function () {
    'use strict';
    fixLinks();
})();
function fixLinks() {
    shortpoint.$('[data-shortpoint-type="accordions"] a').attr('data-interception', 'off');
    setTimeout(fixLinks, 1000);
}

Step 2. Apply the Custom JavaScript from the ShortPoint Theme Builder

Open the ShortPoint Theme Builder (Site contents / Site settings > ShortPoint Dashboard > Theme Builder).  

In the Theme Builder menu, navigate to Utilities > Custom JavaScript:  

Paste the copied JavaScript code from the step 1 to the Custom JavaScript field:

Now click Apply (1) and then Publish (2) to save your changes:

Result

That's it! The links/hyperlinks inside your Accordion Design Elements should now open in a new tab. Here's a quick preview on how it will look like on your page: 

Related articles:

• How to Apply Custom JavaScript/CSS on a Modern SharePoint Site
• How to Link the Element with Another Section of the Page
• How to Make the Accordion Open a Specific Item When the Page Is Loaded