Adding a Show All/Hide All Link

The Toggle script allows you to add a link that can automatically show or hide all collapsible boxes available on the page.

In this case, you should add the class="toggle_all" attribute to the hyperlink that will perform this functionality.

In addition, the Show All/Hide All link should have the attributes such as data-show-all-text="Show All" and data-hide-all-text="Hide All" that provide the Toggle script with text values that will be used for the link in the appropriate states.

Link Example

Show All

Insert a New Hyperlink

1.In the word processor, put the cursor where you want to insert a "Show All/Hide All" link.

2.On the Insert tab, in the Links group, click Hyperlink.

3.In the dialog, in the left sidebar, select the hyperlink type as Web Page.

4.Specify the hyperlink text (for example, "Show All") and the link address as "#".

5.Click OK.

Add the HTML Attributes to the "Show All" Hyperlink

1.In the word processor, select the hyperlink that will implement the "show all/hide all" functionality.

2.On the View tab, in the Tool Panels & Toolbars group, click HTML Attributes.

3.On the HTML Attributes pane, under the Paragraphs node, check the Hyperlinks node to specify that you want to add new HTML attributes to the selected hyperlinks.

4.On the HTML Attributes pane, click Add.

5.In the dialog, specify the attribute name as class and the value as toggle_all.

6.Click OK.

Similarly, you can add the attributes data-show-all-text="Show All" and data-hide-all-text="Hide All" to the hyperlink, so the link will be changing its text depending on the current state.