Set a section to be collapsed when a page loads

pault
Posts: 64

Set a section to be collapsed when a page loads

Fri Dec 02, 2016 3:40 am

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
Site Admin
Posts: 126

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

Mon Dec 05, 2016 4:10 pm

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
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
writeDirection
Posts: 2

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

Wed May 24, 2017 6:29 pm

Hi there,

I'm looking for the same solution for 1.19 - will this work ?
Thanks
alin
Site Admin
Posts: 126

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

Tue May 30, 2017 9:26 am

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
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
shudson310
Posts: 113
Location: USA

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

Thu Dec 28, 2017 9:00 pm

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
Scott Hudson
Content Strategist
Jeppesen
Site: jeppesen.com
shudson310
Posts: 113
Location: USA

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

Thu Dec 28, 2017 9:15 pm

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
Scott Hudson
Content Strategist
Jeppesen
Site: jeppesen.com
shudson310
Posts: 113
Location: USA

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

Thu Dec 28, 2017 9:17 pm

Code: Select all

/* Figure caption */
        "figure > p.figcap",
Scott Hudson
Content Strategist
Jeppesen
Site: jeppesen.com
ionela
Posts: 196

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

Wed Jan 03, 2018 5:43 pm

Hi Scott,

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

Regards,
Ionela
Ionela Istodor
oXygen XML Editor and Author Support

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 2 guests