Creating "Expand All/Collapse All" Links to Show/Hide Expanding Text

Several people have asked recently, how to implement the Expand All and Collapse All functionality we've used on our website to show and hide the expanding text on a page.

You'll be thrilled to hear that it's all really very easy. No complex code required, no customizing templates, just one very small topic and two even simpler hyperlinks... That topic is then embedded wherever it's required. Now try doing that without Author-it!

Author-it adds a class attribute to the text that is inserted by the hypertext link in HTML. This attribute can then be used by a simple javascript command to show (or hide) information.

Note: The class attribute uses the Description property of the style object defined under the DHTML tab of the hypertext link object that is used. Any spaces in the style name are removed and the name is converted to all lowercase. For example, the style Expanding Block, uses the class attribute expandingblock.

To Create Expand All and Collapse All Links:

1. Create a topic, containing the text [ Expand All | Collapse All ]. Because this is specific to our web based outputs, ensure the topic is set to only appear in HTML.
2. Select the topic text Expand All, and click the Hotspot button on the Topic Editor toolbar. The Select an Object For the Hotspot window appears, listing all the Hypertext Links currently available in your Library.
3. Choose the New button. A new Hypertext Link window appears.
4. On the General tab, type a Description for the Link. This is the name given to the link in Author-it but it doesn't appear in any of your document's outputs. Something like Expand All is probably a good idea to identify its use.
5. From the Based On list, select Jump Template.
6. Switch to the Hypertext Links tab.
7. Choose the Add button in the Internet URL panel at the bottom of the window. The cursor moves to the URL field, and "http://www." appears at the start of the field.
8. Remove the text so the URL field is blank, and replace it with the text javascript:showAll('expandingblock')
9. Save your changes by choosing OK. The Hypertext Link window closes, and your new Hypertext Link is applied to the topic text.
10. Select the topic text Collapse All and repeat the steps above, this time replacing the text in the URL field with the text javascript:hideAll('expandingblock')
11. Save the changes to your topic.
12. You can now embed the topic wherever you want your viewers to be able to display all expanding text within a page in one click, and hide it again with another.