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

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

Posted: Mon Sep 12, 2022 9:33 am
by 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.

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

Posted: Mon Sep 12, 2022 12:13 pm
by 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