Try ShortPoint nowWhen you add an Accordions Design Element to your SharePoint page, all accordion sections will automatically start in a collapsed (closed) state when users first load the page:
This article shows you how to keep a specific ShortPoint Accordion item open when the page is loaded:
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have an Accordions Design Element on your page. If you don’t have it yet, check out How to Customize the Accordions Design Element.
Step-by-Step Tutorial
Choose the environment you’re using and follow the steps under it:
For Microsoft 365 / SharePoint 2019 / SharePoint SE
This is for users who have the Microsoft 365 / SharePoint 2019 / SharePoint Subscription Edition (SE) environment.
Below is the JavaScript code used in the interactive tutorial:
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);
}Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit:
- Close the Toolbox:
- Click the Edit Properties icon:
Step 2: Edit the Accordions Design Element
NOTEBefore proceeding, you must already have an Accordions Design Element on your page. If you don’t have it yet, check out How to Customize the Accordions Design Element.
- Click the Accordions tag:
- Hover over the item you want to open upon page load and click the cogwheel icon:
Step 3: Add a Class Name
- Go to the Custom CSS tab.
- Write ‘auto-open-item’ as the class name:
- Click the green check mark.
Step 4: Copy the Code
- Copy the JavaScript code below:
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);
}Step 5: Add the Code Design Element
- Click the plus icon to open the library of Design Elements:
- Look for Code and select it:
Step 6: Paste the Code
- Paste the code in the JavaScript field:
- Go to the Design tab.
- Disable Sandbox Mode:
- Click the green check mark.
Step 7: Save and Publish
- Save your changes:
- Publish your page:
That’s it! Now, when you reload the page, the Accordions item you’ve edited will automatically open:
For SharePoint 2013 and 2016
Copy the JavaScript code below and follow the steps in How to Add JavaScript code to a Page using the Script Editor Web Part to learn how to add it.
<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 eventdocument.addEventListener( 'shortpoint-render-above-fold', function() {// exit on edit modeif( window.shortPointInserter ) {return;}setTimeout( ShortPointReady , 500);});})();</script>Related articles:
