This article is for you if you want 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 into a page

Add an Accordion element into your page and add a few items to hold your content. In the 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:




Step 2: Add a custom CSS class

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




Step 3: Add a Script Editor Web Part

Please 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 the Web Part following the guide mentioned in 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 the page and see your changes in action.


Please don't hesitate to contact us if you have any questions or suggestions.

Thank you for your attention.