How can we help you today?

How to Make the ShortPoint Accordions Open a Specific Item When the Page Is Loaded Using JavaScript

This article shows how to keep a specific ShortPoint Accordion item open when the page is loaded. The Accordion Design Element will otherwise retain its normal functionality.


Example


TABLE OF CONTENTS


Before we begin


ShortPoint Code Design Element is available since ShortPoint version 6.9.35.x or higher. We recommend you to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.

  • You have ShortPoint installed on your SharePoint site(s).
  • You are a ShortPoint user with an active license.

Step-by-Step Tutorial

Step 1: Add an Accordion Design Element to a page


Add an Accordion Design Element to your page and add a few items to hold your content.  In the Design Element settings, go to the Items tab. Select the item you want to have opened when the page is first loaded. 



Note: Custom settings for Accordions Design Element are not yet available in Live Mode. If you are editing your page in Live Mode, kindly switch to the New ShortPoint Page Builder Grid Mode by clicking the Switch to Grid Mode button on the floating bar:
Click the Switch to Wireframe Builder


In the New and the Legacy Page Builder, scroll down in the item's properties and switch on the Enable Custom Settings property:


Enable Custom Settings


Step 2: Add a custom CSS class


Add a custom CSS class named auto-open-item in order to uniquely identify the item you want to have opened.


Add CSS Class


Step 3: Prepare to add the JavaScript code


There are two ways to add the JavaScript code depending on the Sharepoint environment that you are using. Take note of your SharePoint environment as you follow the guide below.


For Office 365 and SharePoint 2019 users


For Office 365 and SharePoint 2019, you need to add the JavaScript code using the ShortPoint Code Design Element. Select it from the Design Elements list in the Page Builder and insert it into your page. 


Note: To know more about the Code Design Element, check out Introducing ShortPoint Code Design Element.


Insert Code Design Element


Copy the code below and paste it on a text pad for your reference:


function ShortPointReady() {
  var $ = shortpoint.base.libs.$;
  var $openItemHeader = $('.auto-open-item .shortpoint-toggle-header');
  var $openItemContent = $('.auto-open-item .shortpoint-toggle-content');
  var $openItemOpenIcon = $('.auto-open-item .shortpoint-toggle-icon-close');
  $openItemOpenIcon
    .removeClass(function(index, className) {
    return (className.match (/(^|\s)shortpoint-icon-fa-\S+/g) || []).join(' ')})
    .addClass('shortpoint-icon-fa-minus-square-o');
  $openItemHeader
    .removeClass('shortpoint-close')
    .addClass('shortpoint-open sp-inserter-open');
  $openItemContent
    .removeClass('shortpoint-close')
    .addClass('shortpoint-open sp-inserter-open');
  shortpoint.initWithin( $openItemContent.parent(), function() {
    $openItemContent.css({
      height: $openItemContent.children().outerHeight()});
  });
};
  
// only run when we're not in edit mode
if( !window.shortPointInserter ) {
  setTimeout( ShortPointReady , 1000);
}
Note: The JavaScript code above will only work on Code Design Element for SharePoint Office 365 and SharePoint 2019 environment. 



For SharePoint 2013 and 2016 users


Add the Script Editor Web Part to your page. Check out  How to Add JavaScript code to a Page using the Script Editor Web Part to learn how to add it. You will have to add custom JavaScript code in the Web Part.


Here is the code that you will need to add in the Script Editor Web Part: 

<script type="text/javascript">
(function() {

'use strict';


/**
* hook method to be executed as soon as shortpoint
* rendered on the page
*/
function ShortPointReady() {
            var $ = shortpoint.base.libs.$;
            var $openItemHeader = $('.auto-open-item .shortpoint-toggle-header');
            var $openItemContent = $('.auto-open-item .shortpoint-toggle-content');
            var $openItemOpenIcon = $('.auto-open-item .shortpoint-toggle-icon-close');
            $openItemOpenIcon
                .removeClass(function(index, className) {
                    return (className.match (/(^|\s)shortpoint-icon-fa-\S+/g) || []).join(' ')
                })
                .addClass('shortpoint-icon-fa-minus-square-o');
            $openItemHeader.removeClass('shortpoint-close').addClass('shortpoint-open sp-inserter-open');
            $openItemContent.removeClass('shortpoint-close').addClass('shortpoint-open sp-inserter-open');
            shortpoint.initWithin( $openItemContent.parent(), function() {
                $openItemContent.css({
                    height: $openItemContent.children().outerHeight()
                });
            });
};


// shortpoint not yet available in the page
// wait for shortpoint render dom event
document.addEventListener( 'shortpoint-render-above-fold', function() {
// exit on edit mode
if( window.shortPointInserter ) {
return;
}


setTimeout( ShortPointReady , 500);
});


})();
</script>



Step 4: Add custom JavaScript code


Now that you already have the code prepared, you can now add the code to your Code Design Element (for Office 365 and SharePoint 2019) and to your Script Editor Web part (for SharePoint 2013 and 2016).


For Office 365 and SharePoint 2019


Click the cog wheel to open the settings of the Code Design Element.


  • In the New ShortPoint Page Builder Grid Mode:

Open the settings of the Code Design Element


  • In the Legacy Page Builder:

Open the Code Design Element settings in the Legacy wireframe Builder


Paste the code in the JavaScript text box:


Paste the code in the JavaScript Text Box


Click Update after pasting the code to save the changes:

Click Update to save the changes



For SharePoint 2013 and 2016


You may refer to the article below for step-by-step instructions on how to add the JavaScript code using the Script Editor Web part:



That's it! Save, Republish, and refresh the page to see your changes in action.


Auto open sample


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