Dropdowns and Expanding Text

Dropdown text and Expanding text are useful ways of entering additional information that is not needed for all readers. This could be extra information for novices or information for experts that is not needed by the general reader.

Creating Dropdowns and Expanding Text

Dropdowns and Expanding Text are created using these icons on the standard toolbar.

Select some text and click one of the icons.

The selected text will be the hotspot and the editing area will display as shown.

Add your content as required and format it in the same way you would any other content in the topic.

When you have finished entering the content, you can hide it by simply double clicking the hotspot. Double click again to view or make further edits.

You can now have different text for the dropdown or expanding text hotspot when it is closed and when it is open. Create the dropdown or expanding text with a string such as Click to see more, then go to Properties > General > Close Text and enter a string such as Close to hide.


In Preview, you will see options to show or hide all dropdown and expanding text.


Both dropdowns and expanding text can have "twisty" images applied.

Creating the Twisty Style

Double click the CSS file to open the editor and select the dropspot style. Expand the Twisties dropdown and enter the path for the images. If you need more than one style of twisty, simply create duplicates such as a.dropspot2.

Applying the Twisty Style

Select your dropdown or expanding text hotspot and go to Properties > Styles and select the required dropspot style. You can check it is set up correctly in Preview.

Expand/Collapse All

The skins now include an Expand/Collapse (Show/Hide) All icon.