Open topic with navigation

Inserting Togglers into Topics

A toggler is a feature that lets you "toggle" between hiding and showing a tagged chunk of content (e.g., paragraph, image, table, list, div). When users open the topic in the output, they will see a link (also called a "toggler hotspot"). This hotspot can be any text in the topic. When users click the hotspot, the hidden content is displayed. When users click the hotspot again, the content becomes hidden once more.

We have assigned a toggler element to this paragraph. Click the "Hide Me" hotspot text below to hide this paragraph. Then click the hotspot again to show the paragraph.

Hide Me

How to insert a toggler into a topic

1. Open the topic where you want to insert the toggler.

2. If the tag block bars are not displayed to the left of the topic, click .

   To see a movie that explains these bars, click here.

3. Hover over the appropriate tag bar next to the content that you want to toggle. When the cursor displays as a hand , click the tag bar.

   examples

   If you want to use a particular paragraph as the toggled content, you would click the <p> tag bar to the left of it.

   If you want to use an entire table as the toggled content, you would click the <table> tag bar to the left of it.
   

4. In the popup menu, select Name.

   The Manage Named Elements dialog opens.

5. Type a name for the toggled element (anything that will help you identify it).

6. Click OK.

   The named element is added, with a yellow flag next to it. The flag will not display in the output. It is simply used to show you where a named element has been inserted. You can hide or show this flag by selecting the option in the View menu.

7. In the topic, highlight the text that you want to use as the toggler hotspot.

8. Select Insert>Toggler.

   The Insert Toggler dialog opens.

9. In the Toggler targets section, click the check box next to the toggler element that you created.
10. In the Toggler class section, select a style class to be associated with the toggler.

11. Click OK.

    The toggler hotspot now has the toggler icon next to it in the XML Editor. (The icon will not display in the output. It is simply used to show you where a named element has been inserted.)

    

12. Press CTRL+S or click to save your work.

See Also

Open topic with navigation