Turning off collapsible sections in wehbelp

[maglid]

I'm using Oxygen v.22 with DITA and publishing to responsive webhelp output. I want to turn off collapsible sections in the webhelp but this transform parameter does not seem to have any effect when I set it to no:

webhelp.show.expand.collapse.sections

The default is yes. This parameter is not mentioned on this help page:

https://www.oxygenxml.com/doc/versions/ ... put-2.html

Thanks,
Mark

[ionela]

Hi,

The parameter you have indicated refers to the Expand/Collapse All Sections button located next to the navigation links. Please see the screen-shot below:

ExpandCollapse.png (1.15 KiB) Viewed 5182 times

Indeed, the title and the description of the parameter is not very clear.

Unfortunately, there isn't a way to turn off collapsible sections from the WebHelp output. I have logged this as an improvement request to our issue tracking took to be further analyzed by our development team.

Regards,
Ionela

[maglid]

Thanks Ionela. I noticed that these little widgets also appear around some tables. Like in this reference topic:

Code: Select all

<reference id="r_wf_blah" xml:lang="en-US">
    <title>Configuration</title>
    <shortdesc>blah blah</shortdesc>
    <refbody>
        <table frame="none" id="table_o3p_wfs_33b">
            <tgroup cols="2">
                <colspec colname="c1" colnum="1" colwidth="2*"/>
                <colspec colname="c2" colnum="2" colwidth="1*"/>
                <thead>

The little show-hide widget appears with this markup. Possibly this is useful on a small device, to hide the table, but it does not make much sense to me on a large screen, which is where I'm viewing it.

Thanks

[Costin]

Hi maglid,

I have just updated the issue that we have logged in our internal tracking system with your latest feedback.

Regards,
Costin

[doctissimus]

Is there any progress on this? I find WebHelp Responsive to be unusable with so many elements of the output being collapsible.

[Costin]

Hello,

I checked and the status of the issue in our system still appears as "open". We will notify this thread when an implementation will become available.
As we did not have many request for this (removing the collapsible sections from the output), most probably this won't be implemented in the short term, but we still consider this for the long term versions.

Kind Regards,
Costin

[doctissimus]

Thanks very much, Costin, for the update.

[chrispitude]

Would it be enough to hide the button via CSS in the undesired cases?

Code: Select all

/* hide the expand/collapse button for tables */
table > caption > .wh_expand_btn {
    display: none;
}

[InspectorSpacetime]

Like Chris mentioned, you can easily do this with CSS.

To remove all expansion buttons, just use

Code: Select all

.wh_expand_btn {
    display: none;
}

Or you can target just a specific type of item, like Chris did with the tables.

Now, to get rid of the empty space or indentation that remains and looks a bit silly, for all items you can use

Code: Select all

.sectiontitle:not(.tasklabel), .topic:not([role~=article])>.title, .wh_term_group>.wh_first_letter, table>caption {
    padding-left: 0em; 
}

Or for a specific element you can use something like

Code: Select all

h2 {
    padding-left: 0em !important;
}

In that case just remember to use the !important property, because the h2 is a less specific selector than the one WebHelp uses by default.

[doctissimus]

Thanks very much, chrispitude and InspectorSpacetime. I'm going to try your suggestions, and then report back here to help others learn what's possible.

And sorry, maglid, for hijacking this thread. Hopefully you've either figured out the CSS hack already or will be interested in trying these latest suggestions.

[doctissimus]

Works like a charm, thanks very much!

I ended up suppressing the display of all elements that use the wh_expand_btn class. While I was at it, I hid the permalink icon by way of the opacity setting:

Code: Select all

.permalink {
    opacity: 0;
}

Now I just need to figure out how to use collapsibles for the one or two sections of my document that need them, and how to make the permalink icon appear when someone hovers over the corresponding HTML heading (currently it appears when you hover over the icon's on-screen-but-hidden position).

Thanks again!

[chrispitude]

Hi doctissimus,

CSS rules with more selectors have more "specificity" and thus take precedence:

CSS - Specificity

so if you set the display property back to its regular value for the desired objects, that should take precedence over the no-object rule.

For CSS selectors of the same specificity, later rules take precedence over earlier rules. To avoid ambiguity, I would put the general hide rule first, then the object-specific unhide rules after.

[doctissimus]

I'm grateful, chrispitude. I'm also a bit clueless.

I was able to get collapsibles to reappear for the section I want by adding this to my custom CSS file:

Code: Select all

div > section > h3 > .wh_expand_btn {
    display: inline;
}

Is there a better way to do that? This way worked for the section I want but also enabled collapsibles for a section of the doc where I don't want them.

Also, after re-enabling collapsibles where I want them to appear, how do I replace the padding whitespace that I removed using this suggestion from InspectorSpacetime:

Code: Select all

.sectiontitle:not(.tasklabel), .topic:not([role~=article])>.title, .wh_term_group>.wh_first_letter, table>caption {
    padding-left: 0em; 
}

Thanks to everyone for offering insights.

[InspectorSpacetime]

Hi Doctissimus,

Like you already noticed, your current solution makes the expand button visible for all h3 elements, not just the ones you want.

Maybe a better solution would be something like this: For the sections you want to be collapsible, add a certain outputclass attribute value in the section's title in your DITA content. Something like this:

Code: Select all

<section id="section_fs3_nlb_3xb">
	<title outputclass="show_collapse">A title</title>
	<p>Lorem Ipsum...</p>
</section> 

Note the show_collapse outputclass value in the title element. Since the DITA-OT publishing process transforms all DITA outputclass attributes into class attributes in the resulting HTML files, we can now target that particular element with CSS, like this:

Code: Select all

.show_collapse > .wh_expand_btn {
    display: inline;
}

And to add the left padding, you can use:

Code: Select all

.show_collapse {
    padding-left: 0.7em !important;
}

This seems to work for me.

[doctissimus]

I'm grateful, InspectorSpacetime. Your suggestion works well for me.

Does anyone know if it's possible to have these collapsible sections of mine default to collapsed instead of expanded? Thanks much.

[doctissimus]

Quick update, I tried setting the webhelp.topic.collapsible.elements.initial.state parameter of my custom transformation to collapsed, but that made everything throughout the document start in a collapsed state (and since I used custom CSS to hide collapse/expand buttons the only way to expand collapsed-by-default elements of the output is to click on the appropriate link in the topic TOC). So I set the webhelp.topic.collapsible.elements.initial.state parameter back to expanded.

I've done a browser inspect of the few elements that I do want to start in a collapsed state (and for which I made the collapse/expand buttons visible), but I can't figure out what I might need to override within my custom CSS file to get the behavior I want. Can anyone point me in the right direction? Any insight would be much appreciated.

[InspectorSpacetime]

Hi Doctissimus,

This is really stretching CSS, but you could try something like this:

Code: Select all

section:has(h3:not(.show_collapse)) > p {
    display: block !important;
}

For this to work, you need to set the webhelp.topic.collapsible.elements.initial.state parameter to collapsed. This CSS overrides that and displays the content as expanded for elements that do NOT have the show_collapse attribute.

A couple of things to note: You might need to do multiple of these for different header levels, so the same code for h2, h3, h4 etc...

This CSS also assumes that your collapsed content is a p element, so if that's not always the case, you probably need to modify it to cover more element types.

And I'm not sure if the nested :has and :not selectors are supported by all browsers, so this is not a safe bet by any means...

[doctissimus]

Thanks very much, InspectorSpacetime. Your suggestion is certainly better than my ongoing cluelessness, so I'll give it a try and report back here.

[doctissimus]

The first thing I noticed is that when I set the webhelp.topic.collapsible.elements.initial.state parameter to collapsed, almost every section on every output topic page starts in a collapsed state (only headings are displayed).

The sections that I want to be collapsible/expandable (starting in a collapsed state) contain nested p and ul elements. If I give the outermost section element an id attribute like id="my_collapsible" can I somehow get it to do what I want?

[doctissimus]

Okay so I'm still struggling with this. Maybe if I write down what I'm trying to do it'll trigger an aha moment for me or for someone generous enough to nudge me toward aha...

I want none of my WebHelp output topics (HTML) to have collapsible sections except for a few that get transformed from specific DITA <section> elements to which I've added an outputclass="my_collapsible" attribute. For example:

Code: Select all

<section outputclass="my_collapsible">
  <!-- THE SECTION'S TITLE SHOULD ALWAYS BE DISPLAYED ALONG WITH EITHER A ">" OR "V" ICON TO ITS LEFT -->
  <title>Muh title</title>
  <!-- THE REST OF THESE ELEMENTS SHOULD BE HIDDEN UNLESS THE USER EXPANDS THE HTML SECTION -->
  <p>Paragraphs and lists in an arbitrary order</p>
  <ul><li>List item</li><li>List item</li></ul>
  <p>Paragraphs and lists in an arbitrary order</p>
  <p>Paragraphs and lists in an arbitrary order</p>
  <ul><li>List item</li><li>List item</li></ul>
  <p>Paragraphs and lists in an arbitrary order</p>
</section>

Using various online resources/tutorials, I've tried numerous styles to get what I want, and I can't remember enough to list them all here. The most recent one that didn't work for me is this:

Code: Select all

section.my_collapsible:has(p, ul) {
  display: block !important;
}

One thing I've learned is that these kinds of pseudo-classes (e.g. :has(), :is(), etc.) aren't supported OOTB on Firefox. So I think I need to find a way to do this that doesn't involve such psudeo-classes.

[doctissimus]

Quick update, this CSS amateur made a little bit of progress.

Code: Select all

section.my_collapsible > h3 > .wh_expand_btn {
    display: block !important;
    padding-right: 0.7em !important;
}

This bit of CSS brings back the collapsible buttons for the elements I want, so that's a step in the right direction. Two puzzles remain:

• The padding-right: 0.7em; style doesn't seem to add the space that I want between the collapsible's button (">" or "V" depending) and the h3's text. Not sure what to do there.

• I want these collapsible elements to start in a collapsed state, but setting the webhelp.topic.collapsible.elements.initial.state transformation parameter to collapsed makes almost everything on every page disappear (other than section titles).

Can anyone throw a clue my way? Much appreciated.

[doctissimus]

I'm hoping that maybe using the :not() pseudo-class in conjunction with setting webhelp.topic.collapsible.elements.initial.state to collapsed might help make all the elements that don't have styling from the .my_collapsible class start in an expanded state. Am I fooling myself or is something like that possible?

Something like h3:not(.my_collapsible) oughta work, but I don't know what actual style to apply to get those elements to override the collapsed value of webhelp.topic.collapsible.elements.initial.state.

Code: Select all

h3:not(.my_collapsible) {
    ?
}

Thanks for any insight.

[InspectorSpacetime]

Have you tried display: block in the selector? And maybe try the !important with it?

[im_rem]

Hello,
I wanted to ask if this improvement is still planned. Fiddling (a lot) with CSS might be a solution. But in general people would expect the expand/collapse parameter to turn collapsible sections off entirely and not only hide the button. The expand/collapse arrows make the website look very cluttered and ugly and absolutely noone uses them (except on a page with many question-answer pairs). Users rather rely on the table of content to left or right.
So this improvement would be really helpful.
Kind regards
im_rem

[Costin]

Hi,
I also logged your latest feedback on the issue we have in our tracking system and tried to prioritize it.
We will reply back to this thread if a different implementation would become available.

Regards,
Costin