Inserting Drop-Down Text

If you have a very long topic, you may want to break up sections of it to make it easier to read. One way to do this is to add drop-down text, which collapses sections of content under a single link in the topic (called a "drop-down hotspot"). When users click the hotspot in the output, the text expands and they can see the hidden content. If they click the hotspot again, the text collapses.

How to Insert Drop-Down Text

  1. In the Content Explorer, double-click Attractions.htm. The topic opens in the XML Editor.
  2. At the end of the first paragraph, press ENTER to add a new line. Then type Balboa Park.
  3. Use your mouse to select the three elements that relate to Balboa Park: the text you just added, the paragraph about the park, and the image of the fountain.
  4. From the Insert ribbon, select Drop-Down Text.

  5. Flare creates a drop-down for the content you selected. The text you added earlier (Balboa Park) now has a special style applied to it (MadCap:dropDownHotspot) to distinguish it as a clickable drop-down hotspot. All of the content that is included in the drop-down is surrounded by large, light gray brackets.

    Let's add drop-downs for the sections about the Zoo and Petco Park.

  6. Scroll down in the topic, and before the paragraph about the San Diego Zoo, add a new line and type San Diego Zoo.
  7. Use your mouse to select the three elements that relate to the San Diego Zoo: the text you just added, the paragraph about the zoo, and the image of the panda.
  8. Select Insert > Drop-Down Text to add a drop-down to this section.

  9. Scroll down, and before the paragraph about Petco Park, add a new line and type Petco Park.

  10. Use your mouse to select the three elements that relate to Petco Park: the text you just added, the paragraph about the ballpark, and the image of the ballpark.
  11. Select Insert > Drop-Down Text to add a drop-down to this section.

  12. Click Save the active file. to save your work.

Note Drop-down effects are supported only in online outputs. You can still have them in your topics if you plan to generate print-based outputs, such as PDF. However, it will just look like regular text.

Note If you have been following this tutorial in order, there is not an online target in the project yet. However, we'll revisit these drop-downs when we build HTML5 output. See Creating a New Target and Building and Viewing HTML5 Output.