How to Redirect Users to an Item in an Accordion on Another Page

Using a Button or other Design Elements with linking options, you can redirect users to a specific item found within an Accordion on another page. This is a neat feature if you have more information to share but cannot fit it into your main or home page. In this article, we will show you how you can do this with ShortPoint.

Here is what we want to achieve:

TABLE OF CONTENTS

• Prerequisites
• Redirect to an Item Within an Accordion on Another Page
  • Part 1: Set up the destination Accordion item
    • Step 1: Identify the Section by adding an ID name
    • Step 2: Identify the Accordion item by adding an ID name
    • Step 3: Insert Javascript code into a Code Design Element
  • Part 2: Set up the Design Element that will redirect users to the destination Accordion item
    • Step 1: Open the settings of the Design Element you will use
    • Step 2: Add the copied page URL into a Button Design Element
    • Step 3: Apply changes and publish

Prerequisites

• You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.
• You already inserted an Accordion and added your content.

Redirect to an Item Within an Accordion on Another Page

You can configure a Design Element such that an action (i.e. clicking a button) can instantly open an item of an Accordion on a different page. There are two parts to the process.

Note: This solution works for Design Elements found on separate pages.

Part 1: Set up the destination Accordion item

Follow the steps below to set up the Javascript code that will execute the action from the destination page:

Step 1: Identify the Section by adding an ID name

• Edit the page where the destination Accordion is inserted.
• Select the ShortPoint web part and enter edit mode by clicking the pencil icon.
• Navigate to the Section and click on its label.
• Open the Section settings window by clicking on the cogwheel icon.

• Switch to the Custom CSS tab.
• Give the Section an ID name. We are adding scrollSection as the ID name in our example.
• Click the green check mark to apply your changes.

Step 2: Identify the Accordion item by adding an ID name

• Next, navigate to the Accordion and click the label.
• Click the cogwheel icon of the Accordion item you want to be activated.

• Switch to the Custom CSS tab.
• Give the Accordion item an ID name. We are adding accordion1 as the ID name in our example.
• Click the green check mark to apply your changes.

Step 3: Insert Javascript code into a Code Design Element

We will use a Javascript code to execute the page's desired action. We add the Code Design Element for this. Here is the code that we will use.

(function () {
    var hash = window.location.hash;
    if (typeof (hash) == 'string' && hash.includes('#') && hash.split('-').length == 2) {
        var scrollTags = hash.substring(1).split('-');

        var scrollSection = document.getElementById(scrollTags[0]);
        if (scrollSection != null) {
            scrollSection.scrollIntoView({ block: 'center', behavior: 'smooth' });

            // then activate accordion...
            var activateTab = document.getElementById(scrollTags[1]);
            if (activateTab != null) {
                activateTab.querySelector('.shortpoint-a').click();
            }
        }
    }
})();

• Copy the Javascript code.
• Switch to Grid Mode.

Note: The Code Design Element is available only in Grid Mode.

• Now, click the plus Add design element button under the Accordion.

• Select Code Design Element.
• In the Javascript field, paste the copied code.

• Disable Sandbox Mode.

• Then click Insert to apply your changes.

Step 4: Copy the page URL

• Hit the Save button on the Action Toolbar.
• Republish the page.
• Go to your browser’s address bar and copy the page URL. You will need this URL to complete the next part.

Part 2: Set up the Design Element that will redirect users to the destination Accordion item

We will now add a link to the Accordion item on the main page. You can use any Design Element that has linking options. In our example, we are using a Button. Here are the steps:

Step 1: Open the settings of the Design Element you will use

• Edit the page where the Button is inserted.
• Select the ShortPoint web part and enter edit mode by hitting the pencil icon.
• Navigate to the Button and hit clicking its label.
• Open its settings by pressing the cogwheel icon.

Step 2: Add the copied page URL into a Button Design Element

• Go to the link field.
• Paste the page URL you copied from the previous page.
• Add the Section ID and the Accordion item ID you assigned in Part 1 to the end of the page URL. See the example below.

Example URL:

https://yourcompany.sharepoint.com/sites/Brightworks/SitePages/Contact-Us.aspx#scrollSection-accordion1

Where:

https://yourcompany.sharepoint.com/sites/Brightworks/SitePages/Contact-Us.aspx is our copied page URL

# is an added hashtag symbol

scrollSection is the Section ID name

- is an added dash symbol

accordion1 is the Accordion item ID name

Step 3: Apply changes and publish

• Once done, click the green check mark.
• Save all your changes and hit Republish.

Users who click the Button will be brought to the Section where the Accordion is located. They will also see the specific Accordion item expanded and view the details. Apply this trick to your SharePoint page now.

Related articles:

• Introducing ShortPoint Code Design Element
• How to Create an Anchor Link That Opens Specific Content on a SharePoint Page
• How to Hyperlink Your SharePoint Site Logo
• How to Make All Links/Hyperlinks in the Accordion Design Element Content Open in a New Tab