Set a section to be collapsed when a page loads

pault
Posts: 69
Joined: Thu Mar 21, 2013 12:55 am

Set a section to be collapsed when a page loads

Post by pault » 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: 143
Joined: Thu Dec 24, 2009 11:21 am

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

Post by alin » 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
Joined: Wed Aug 12, 2015 1:27 am

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

Post by writeDirection » 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: 143
Joined: Thu Dec 24, 2009 11:21 am

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

Post by alin » 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: 137
Joined: Sat Feb 26, 2005 12:09 am
Location: USA
Contact:

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

Post by shudson310 » 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: 137
Joined: Sat Feb 26, 2005 12:09 am
Location: USA
Contact:

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

Post by shudson310 » 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: 137
Joined: Sat Feb 26, 2005 12:09 am
Location: USA
Contact:

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

Post by shudson310 » 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: 297
Joined: Mon Dec 05, 2011 6:08 pm

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

Post by ionela » 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

Post Reply