There are a lot of different jQuery show/hide toggles. The one we'll be implementing is here:
Simple Expand. Additionally, the instructions here
show you how to implement the toggle with the twisty arrows.
For a demo of the effect, see the webhelp output of the DITA QRG.
Note: The method described here permanently alters your webhelp output from Oxygen. If you don't want top alter the output, make a copy of the files that you're altering first.
In a text editor, open the following js file: [Oxygen Install Directory]/frameworks/dita/DITA-OT/plugins/com.oxygenxml.webhelp/oxygen-webhelp/resources/js/webhelp_topic.js.
Insert the copied script at the bottom right before the closing });.
$('.expander').simpleexpand();
This function triggers the script. Wherever the expander class exists, the the simpleexpand function will trigger. This script will appear in your webhelp topic frame (instead of your sidebar).
Save the close the file.
In a text editor, open the following file: [Oxygen Install Directory]/frameworks/dita/DITA-OT/plugins/com.oxygenxml.webhelp/oxygen-webhelp/resources/css/webhelp_topic.css.
Any element with the class content will be hidden. When the script is run, the content class will be removed and one of the other classes will be added.
In my demo, I added some more classes to style how the expand and collapse sections appear. If you want to style your output like the demo, use these styles instead of the previous:
Right-click the images (they appear in the upper-left corner) and save the images to your computer.
Copy the images into this folder: [Oxygen Install Directory]/frameworks/dita/DITA-OT/plugins/com.oxygenxml.webhelp/oxygen-webhelp/resources/img.
Now you've set up your jQuery script, styles, and images. The next step shows how to incorporate the show/hide effect in a page.
To include a show/hide instance on a page, add the following:
<sectiondiv><poutputclass="expander">View details</p><poutputclass="content">This is the content that gets expanded.</p></sectiondiv>
Adding outputclass on an element renders it to class in the HTML output.
It's not absolutely necessary to include the sectiondiv tag. However, if you have multiple elements with an outputclass="content" on your elements, and those elements are siblings (rather than in a parent/child hierarchy), all the siblings will expand. By containing each element with outputclass="content" inside a sectiondiv tag, then only that element inside the sectiondiv will expand.
This is because the default behavior of the Simple Expand plugin is to climb up to the parent element and expand all child elements containing the content class. By using sectiondiv elements, you create multiple parent-child relationships.
The sectiondiv tag works only inside a section element, which is only allowed in concept and general task elements. For task elements, you can use the info, stepxmp, context or other div block elements.
You can also transclude content from another page.
The transclusion source might look like this:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE concept PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd"><conceptid="lipsum_source"><title>Sample Show/Hide Content</title><shortdescid="lipsum_shortdesc">This is a page containing sample content that acts as the transclusion source for the show/hide demo.</shortdesc><conbody><sectionid="lipsum1"><title>Lipsum section 1</title><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></section><sectionid="lipsum2"><title>Lipsum section 2</title><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></section></conbody></concept>
If so, the transclusion target would look like this:
<!DOCTYPE concept PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd"><conceptid="concept_cmy_2g1_kp"><title>Show/hide demo</title><shortdesc>This is a demo of the show/hide functionality.</shortdesc><conbody><p>This first expandable section is transcluded from this page: <xrefhref="jquery_showhide_sample_content.dita"/>.</p><poutputclass="expander">View more</p><sectionconref="jquery_showhide_sample_content.dita#lipsum_source/lipsum1"outputclass="content"/><sectionconref="jquery_showhide_sample_content.dita#lipsum_source/lipsum2"outputclass="content"/><sectionconref="jquery_showhide_sample_content.dita#lipsum_source/lipsum3"outputclass="content"/></conbody></concept>
I'm an API technical writer based in the Seattle area. On this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, AI, information architecture, content strategy, writing processes, plain language, tech comm careers, and more. Check out my API documentation course if you're looking for more info about documenting APIs. Or see my posts on AI and AI course section for more on the latest in AI and tech comm.
If you're a technical writer and want to keep on top of the latest trends in the tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.
