How can we help you today?

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:


Redirect to another page


TABLE OF CONTENTS


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.


open Section settings

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


custom CSS tab


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.


accordion item settings

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


accordion custom css


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.


Switch to Grid Mode button


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


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


add code design element

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


add JS code

  • Disable Sandbox Mode.


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.


open Button settings


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


add link URL


Step 3: Apply changes and publish

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


save changes


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:

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 57 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