Set a section to be collapsed when a page loads
Posted: 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?
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>
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: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):
- Tables with titles
- Nested topics
- Sections with titles
- Indexterms groups
NOTE: The above code is available only for oXygen & WebHelp Plugin 18.1 and may not be compatible with future releases.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>
If you have further questions, please let me know.
Regards,
Alin
Code: Select all
/* Figure caption */
"figure > p.figcap",