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.



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. 

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

In Office 365 and SharePoint 2019

Insert the Code Design Element:

Insert Code Design Element

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.

Step 4: Add custom JavaScript code

Copy the following JavaScript code into your clipboard and paste it in either the Code Design Element (Office 365 and SharePoint 2019), or the Script Editor Web Part (SharePoint 2013 and 2016) following the previous step:

<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');
                .removeClass(function(index, className) {
                    return (className.match (/(^|\s)shortpoint-icon-fa-\S+/g) || []).join(' ')
            $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() {
                    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 ) {

setTimeout( ShortPointReady , 500);


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

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