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


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');
            $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>

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