Have Collapsible Heading Widgets appear initially collapsed

Avatar
Support Information
Follow

The Collapsible Heading Widget is by default expanded. This is by design so that the content beneath the heading is visible but can be collapsed by the user. You may, however, decide that you want the headings to be initially collapsed. You can do this by adding some custom script to your project.

The instructions in this article require that you are using the Classic, Material or Light templates or Custom templates derived from them
  1. Create a new javascript file in your project script directory (e.g. headings-initially-collapsed.js) using notepad and copy and paste the script below:
    
(function () {
    // Define a new feature constructor
    var collapseAllOnLoadFeature = function(documentInstance) {
        Innovasys.Content.DocumentFeatureBase.call(this, documentInstance);
    };
    // .. that inherits from the DocumentFeatureBase
    __extends(collapseAllOnLoadFeature, Innovasys.Content.DocumentFeatureBase);
    // Return a unique feature name
    collapseAllOnLoadFeature.prototype.getName = function () {
        return "Collapse All Toggle Sections On Load";
    };
    // Make sure it initializes after the built in features
    collapseAllOnLoadFeature.prototype.initializeContentOrdinal = function () {
        return 99999;
    }
    // When the content initializes, collapse any sections that are not already collapsed
    collapseAllOnLoadFeature.prototype.initializeContent = function (rootSelector, isInitialLoad) {
        var toggleFeature = this.documentInstance.getFeatureByName("Toggle Sections");
        var expandedSections = $("." + toggleFeature.getToggleHeadingClassName() +":not(." + toggleFeature.getToggleHeadingClassName() + toggleFeature.getToggledSuffix() + ")");
        toggleFeature.toggleSection(expandedSections, true);
    }
    // The factory is how we register our feature with the Innovasys document object
    var collapseAllOnLoadFactory = function() {};   
    collapseAllOnLoadFactory.prototype.createInstance = function (documentInstance) {
        return new collapseAllOnLoadFeature(documentInstance);
    };
    // Register our factory in the DocumentFeatureConfiguration
    Innovasys.Content.DocumentFeatureConfiguration.registerDocumentFeatureFactory(new collapseAllOnLoadFactory());
})();
 
  1. Add the .js file you created to your project using the Add Existing Other File ribbon command.

After you rebuild your output, collapsible Heading Widgets in your Topics will now be collapsed by default in the generated output.

 

 

Have more questions? Submit a request

5 Comments

Date Votes
  • 0
    Avatar
    Patrick Lanz

    Hello,

    unfortunately, this code no more works with the new Material template.

    What's the solution now?

    Error message in editor is:

    Script error
    Line: 1
    Char: 17
    Error: Object doesn't support property or method 'toggleSection'.

  • 0
    Avatar
    Tatjana van Lottum

    I am running into the same issue. The script works like a charm on 2012Style, not on the latest and greatest. Hopefully there is a new script available?

  • 0
    Avatar
    Tatjana van Lottum

    Please verify the following script which was provided to me by one of my coworkers:

    $(function () {
    $("#i-body-content .i-section-content").toggle();
    $("#i-body-content .i-section-heading").addClass("i-section-heading-collapsed");
    });

    I placed this script in headings-initially-collapsed.js and it seems to work fine in the new version of HelpStudio.

  • 0
    Avatar
    Lukas Severn

    Hi,

    The issue here is that this Knowledgebase article has not been updated for the new 2016 templates - I apologize for any inconvenience caused by this and I have flagged this article to be updated. This is now trickier to do through plain javascript - It's a bit more script that just setting a class name, but it leverages our existing script to do the toggling and get the class name values etc. so should be much more future proof. 


    This is the script - add this to a .js file in a project, or in a custom template and all sections will be collapsed when the page loads.

    (function () {

        // Define a new feature constructor
        var collapseAllOnLoadFeature = function(documentInstance) {
            Innovasys.Content.DocumentFeatureBase.call(this, documentInstance);
        };
        // .. that inherits from the DocumentFeatureBase
        __extends(collapseAllOnLoadFeature, Innovasys.Content.DocumentFeatureBase);

        // Return a unique feature name
        collapseAllOnLoadFeature.prototype.getName = function () {
            return "Collapse All Toggle Sections On Load";
        };

        // Make sure it initializes after the built in features
        collapseAllOnLoadFeature.prototype.initializeContentOrdinal = function () {
            return 99999;
        }

        // When the content initializes, collapse any sections that are not already collapsed
        collapseAllOnLoadFeature.prototype.initializeContent = function (rootSelector, isInitialLoad) {
            var toggleFeature = this.documentInstance.getFeatureByName("Toggle Sections");
            var expandedSections = $("." + toggleFeature.getToggleHeadingClassName() +":not(." + toggleFeature.getToggleHeadingClassName() + toggleFeature.getToggledSuffix() + ")");
            toggleFeature.toggleSection(expandedSections, true);
        }

        // The factory is how we register our feature with the Innovasys document object
        var collapseAllOnLoadFactory = function() {};    
        collapseAllOnLoadFactory.prototype.createInstance = function (documentInstance) {
            return new collapseAllOnLoadFeature(documentInstance);
        };

        // Register our factory in the DocumentFeatureConfiguration
        Innovasys.Content.DocumentFeatureConfiguration.registerDocumentFeatureFactory(new collapseAllOnLoadFactory());
    })();


    I apologize for any inconvenience caused by this problem.

    Let me know if you need any further information at all. 

  • 0
    Avatar
    Tatjana van Lottum

    Thank you Lucas, I have replaced the whimpy little script with your complete script and it does the job. Thanks again.

Please sign in to leave a comment.