How to Create an Anchor Link that Opens to a Specific Accordion Item

This article will show you how to create an anchor link that redirects to a specific accordion item:

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Edit the Accordions Design Element
  • Step 3: Add a Class Name to Every Accordion Item
  • Step 4: Edit a Design Element
  • Step 5: Add a Link to Every Item
  • Step 6: Add a Class Name
  • Step 7: Copy JavaScript Code
  • Step 8: Insert a Code Design Element
  • Step 9: Paste JavaScript Code
  • Step 10: Save and Publish

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 an Accordions Design Element on your page:

• You must already have a Design Element that allows linking of multiple items, including Tiles, Simple List, Icon List, etc.

Step-by-step Tutorial

Follow the steps below to learn how to create the anchor link:

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:

Close the Toolbox:

Click the Edit Properties icon:

Step 2: Edit the Accordions Design Element

NOTEBefore proceeding, make sure you already have an Accordions Design Element on your page. If you don’t have one yet, check out How to Customize the Accordions Design Element. 

Click the Accordions tag:

Select the cogwheel icon:

Step 3: Add a Class Name to Every Accordion Item

Click the cogwheel icon of the first item:

Go to the Custom CSS tab:

In the Class Name field, write 'sp-tiles-click-number'. Replace ‘number’ with the actual position of your item in the sequence. For example, since this is the first item, use '1'; for the second item, use '2', and so on.

NOTEMake sure to take note of this class name as you will need it in the next steps.

Click the back icon:

Repeat step 3 for every item you have inside the Accordions:

Once done, click the green check mark:

Step 4: Edit a Design Element

NOTEYou must already have a Design Element that allows linking of multiple items, including Tiles, Simple List, Icon List, etc. 

Select the EasyPass tag of the Design Element you want to use. For this guide, we’ll use Tiles:

Click the cogwheel icon:

Step 5: Add a Link to Every Item

Click the cogwheel icon of the first item:

In the Link field, enter '#sp-tiles-click-number'. The number in this link must match the number you used in the Class Name from Step 3. For example, if your Class Name for this specific item is 'sp-tiles-click-1', then your Link should be '#sp-tiles-click-1'.

Click the back icon:

Repeat step 5 for the other items:

Step 6: Add a Class Name

Click the cogwheel icon of the first item:

Go to the Custom CSS tab:

Under Class, write ‘sp-tiles-click’:

Click the back icon:

Repeat step 6 for the other items:

Once done, click the green check mark:

Step 7: Copy JavaScript Code

Copy the JavaScript code below:

function openAccordion(accordionClassName) {
    var $ = shortpoint.base.libs.$;
    var $openItemOpenIcon = $(accordionClassName + ' .shortpoint-toggle-icon-open');
   
    // Simulate click on the open icon
    $openItemOpenIcon.trigger('click');
};

// Function to attach click listeners
function attachTileClickListeners() {
    const tiles = document.querySelectorAll(".sp-tiles-click");

    tiles.forEach(tile => {
        tile.addEventListener("click", handleTileClick);
    });
}

// Function to handle the click event
function handleTileClick(event) {
    let hrefValue = getNestedHref(event.currentTarget);
    if (typeof (hrefValue) == 'string' && hrefValue.includes('#')) {
        let className = hrefValue.substring(1); // Remove the leading '#'
        if (className) {
            scrollIntoView(className);
            openAccordion('.' + className);
        }
    }
}

function getNestedHref(tileDiv) {
    const anchor = tileDiv.querySelector("a");
    return anchor ? anchor.getAttribute("href") : null;
}

function scrollIntoView(className) {
    let elem = document.getElementsByClassName(className)[0];
    if (elem != null) {
        elem.scrollIntoView({
            block: 'center',
            behavior: 'smooth'
        });
    }
}


setTimeout(attachTileClickListeners, 1000);

Related articles:

• How to Add a Search Box to Your SharePoint Page Using the Code Design Element
• How to Display Dynamic Greetings on Your SharePoint Page Using the Code Design Element
• How to Use the Text Alignment Feature for the Textshow Design Element
• How to Embed an Entire LinkedIn Feed to a SharePoint Page Using the Code Design Element