Page 1 of 1

Set a section to be collapsed when a page loads

Posted: Fri Dec 02, 2016 3:40 am
by 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?

Re: Set a section to be collapsed when a page loads

Posted: Mon Dec 05, 2016 4:10 pm
by 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

Re: Set a section to be collapsed when a page loads

Posted: Wed May 24, 2017 6:29 pm
by writeDirection
Hi there,

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

Re: Set a section to be collapsed when a page loads

Posted: Tue May 30, 2017 9:26 am
by 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

Re: Set a section to be collapsed when a page loads

Posted: Thu Dec 28, 2017 9:00 pm
by 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.

alin wrote: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

Re: Set a section to be collapsed when a page loads

Posted: Thu Dec 28, 2017 9:15 pm
by 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

Re: Set a section to be collapsed when a page loads

Posted: Thu Dec 28, 2017 9:17 pm
by shudson310

Code: Select all

/* Figure caption */
        "figure > p.figcap",

Re: Set a section to be collapsed when a page loads

Posted: Wed Jan 03, 2018 5:43 pm
by ionela
Hi Scott,

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

Regards,
Ionela