Try ShortPoint nowThis 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.
TABLE OF CONTENTS
Before we begin
ShortPoint Code Design Element is available since 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-by-Step Tutorial
Step 1: Add an Accordion Design Element to a page
Add an Accordion Design Element to your page and add a few items to hold your content. In the Design Element settings, go 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:
In the New and the Legacy Page Builder, scroll down in the item's properties and switch on the Enable Custom Settings property:
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.
Step 3: Prepare to add the JavaScript code
There are two ways to add the JavaScript code depending on the Sharepoint environment that you are using. Take note of your SharePoint environment as you follow the guide below.
For Office 365 and SharePoint 2019 users
For Office 365 and SharePoint 2019, you need to add the JavaScript code using the ShortPoint Code Design Element. Select it from the Design Elements list in the Page Builder and insert it into your page.
Note: To know more about the Code Design Element, check out Introducing ShortPoint Code Design Element.
Copy the code below and paste it on a text pad for your reference:
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()});
});
};
// only run when we're not in edit mode
if( !window.shortPointInserter ) {
setTimeout( ShortPointReady , 1000);
}Note: The JavaScript code above will only work on Code Design Element for SharePoint Office 365 and SharePoint 2019 environment.
For SharePoint 2013 and 2016 users
Add the Script Editor Web Part to your page. Check out How to Add JavaScript code to a Page using the Script Editor Web Part to learn how to add it. You will have to add custom JavaScript code in the Web Part.
Here is the code that you will need 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 can now add the code to your Code Design Element (for Office 365 and SharePoint 2019) and to your Script Editor Web part (for SharePoint 2013 and 2016).
For 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:
- In the Legacy Page Builder:
Paste the code in the JavaScript text box:
Click Update after pasting the code to save the changes:
For SharePoint 2013 and 2016
You may refer to the article below for 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 to see your changes in action.
Related articles:
