Set a section to be collapsed when a page loads

[pault]

In Webhelp Responsive, is there a built-in way to set a section or any other element to be collapsed when a page loads?

[alin]

Hello,

There is no out of the box option to collapse certain elements in the WebHelp output when the page is loaded.
However, this can be achieved by contributing a custom JavaScript code to the WebHelp transformation.
If you are using oXygen and WebHelp plugin 18.1 the following procedure will help you include a custom resource in the output:
https://www.oxygenxml.com/doc/versions/ ... -html.html
The WebHelp Responsive 18.1 output has expand/collapse capabilities for the following type of elements:

• Tables with titles
• Nested topics
• Sections with titles
• Indexterms groups

Initially, these elements are expanded. In order to toggle their expand state, you can use the following XHTML & JavaScript fragment in combination with the "webhelp.fragment.after.body" parameter (as described in the linked procedure above):

Code: Select all

<div><script>

    <!--

    var collapsibleSections = {

        /* Selectors for the nodes that contain an expand/collapse button. */

        "expand_buttons" : [

            /* Table caption */

            "table > caption > .wh_expand_btn",

            /* Article title */

            ".topic > .title > .wh_expand_btn",

            /* Section title */

            ".sectiontitle > .wh_expand_btn",

            /* Index terms groups */

            ".wh_term_group > .wh_first_letter > .wh_expand_btn"

        ]

    };



    $(document).ready(function () {

        /* Collapse selected nodes. */

        collapsibleSections.expand_buttons.forEach(

            function(selector) {

                var matchedNodes =  $(document).find(selector);

                // Change the button state

                matchedNodes.toggleClass("expanded");

                // Will collapse the siblings of the parent node, excepting the ones that were marked otherwise

                var siblings = matchedNodes.parent().siblings(':not(.wh_not_expandable)');

                siblings.toggle();

            }

        );

    });

    //-->

</script>

</div>

NOTE: The above code is available only for oXygen & WebHelp Plugin 18.1 and may not be compatible with future releases.

If you have further questions, please let me know.

Regards,
Alin

[writeDirection]

Hi there,

I'm looking for the same solution for 1.19 - will this work ?
Thanks

[alin]

Hello,

I have tested the solution posted above with WebHelp 19.0 and one of our sample DITA maps and it seems to work.
Please let me know if you need further assistance.

Regards,
Alin

[shudson310]

How can we add this expand/collapse functionality to certain elements?
For example, I would like to be able to collapse fig this way.

Hello,

There is no out of the box option to collapse certain elements in the WebHelp output when the page is loaded.
However, this can be achieved by contributing a custom JavaScript code to the WebHelp transformation.
If you are using oXygen and WebHelp plugin 18.1 the following procedure will help you include a custom resource in the output:
https://www.oxygenxml.com/doc/versions/ ... -html.html
The WebHelp Responsive 18.1 output has expand/collapse capabilities for the following type of elements:

• Tables with titles
• Nested topics
• Sections with titles
• Indexterms groups

Initially, these elements are expanded. In order to toggle their expand state, you can use the following XHTML & JavaScript fragment in combination with the "webhelp.fragment.after.body" parameter (as described in the linked procedure above):

Code: Select all

<div><script>

    <!--

    var collapsibleSections = {

        /* Selectors for the nodes that contain an expand/collapse button. */

        "expand_buttons" : [

            /* Table caption */

            "table > caption > .wh_expand_btn",

            /* Article title */

            ".topic > .title > .wh_expand_btn",

            /* Section title */

            ".sectiontitle > .wh_expand_btn",

            /* Index terms groups */

            ".wh_term_group > .wh_first_letter > .wh_expand_btn"

        ]

    };



    $(document).ready(function () {

        /* Collapse selected nodes. */

        collapsibleSections.expand_buttons.forEach(

            function(selector) {

                var matchedNodes =  $(document).find(selector);

                // Change the button state

                matchedNodes.toggleClass("expanded");

                // Will collapse the siblings of the parent node, excepting the ones that were marked otherwise

                var siblings = matchedNodes.parent().siblings(':not(.wh_not_expandable)');

                siblings.toggle();

            }

        );

    });

    //-->

</script>

</div>

NOTE: The above code is available only for oXygen & WebHelp Plugin 18.1 and may not be compatible with future releases.

If you have further questions, please let me know.

Regards,
Alin

[shudson310]

I found it! I added
[Codebox=]/* Figure caption */
"figure > p.figcap",[/Codebox]

to com.oxygenxml.webhelp.responsive/templates/dita/bootstrap/resources/js/wt_expand.js

Is there an easier way to add this customization so I don't have to modify the base plugin?

Thanks,
--Scott

[shudson310]

Code: Select all

/* Figure caption */

        "figure > p.figcap",

[ionela]

Hi Scott,

Unfortunately, there isn't another easier way to add this customization.

Regards,
Ionela

[schelmenzunft]

I have sectioins in individual topics, f.e. topics that contain large graphics, and tehese should open collapsed.
Is it possible to change the status on a topic base?
Thx.

[Costin]

Hi,

Unfortunately, it is not possible to set the collapsible state only for specific topics.
There is the "webhelp.topic.collapsible.elements.initial.state" transfomration parameter indeed, but that controls the global collapsible state (for all elements), not only for one / some of them.
However, we already have an improvement request logged in our internal system, so we have just increased the priority and will notify this thread when something will be implemented on this direction.

Regards,
Costin