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.
- Download the minified script from the jQuery Simple Expand plugin site and copy it to your clipboard.
- 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
This function triggers the script. Wherever the
expanderclass exists, the the
simpleexpandfunction 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.
Insert the following styles:
Any element with the class
contentwill be hidden. When the script is run, the
contentclass 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:
Grab the two arrow images: expanded.gif and collapsed.gif
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:
outputclasson an element renders it to
classin the HTML output.
It's not absolutely necessary to include the
sectiondivtag. 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
sectiondivtag, then only that element inside the
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
contentclass. By using
sectiondivelements, you create multiple parent-child relationships.
sectiondivtag works only inside a
sectionelement, which is only allowed in concept and general task elements. For task elements, you can use the
contextor other div block elements.
You can also transclude content from another page.
The transclusion source might look like this:
If so, the transclusion target would look like this:
For more details about using
conref, see Conref (re-use of content).
I'd Rather Be Writing Newsletter
Get new posts delivered straight to your inbox.