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 the 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 1: Add an Accordion Design Element into a page


Add an Accordion Design Element into your page and add a few items to hold your content.  In the Design Element settings, please navigate 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


 We currently have two ways how to add the JavaScript code depending on the Sharepoint environment that you are using.


In Office 365 and SharePoint 2019


For Office 365 and SharePoint 2019, we will be adding the JavaScript code using ShortPoint Code Design Element. Select it from the Design Elements list in the Page Builder and insert it in your page. 


Note: To know more about the Code Design Element, please visit Introducing ShortPoint Code Design Element.


Insert Code Design Element


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


(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 on 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);
  });
})();
Note: The JavaScript code above will only work on Code Design Element for SharePoint Office 365 and SharePoint 2019 environment. 

In SharePoint 2013 and 2016


Add the Script Editor Web Part into your page. Here is a short tutorial how to add it: How to Add JavaScript code to a Page using the Script Editor Web Part. You will have to add custom JavaScript code in the Web Part.


Here is the code that we are going 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 may proceed with the instructions below on how to add it to your Code Design Element (for Office 365 and SharePoint 2019) and to your Script Editor Web part (for SharePoint 2013 and 2016).


In 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


In SharePoint 2013 and 2016


You may refer to the article below for a 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 and 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 65 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