How can we help you today?

How to Make the Accordion Open a Specific Item When the Page Is Loaded

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

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