REA Table of Contents

REA Table of Contents widget organizes your page according to your H1 to H6 levels of hierarchy. You still have power over what can be included and excluded from the list of headings.

Content

Table of Contents

1. Title - You can add the title of the table of contents box.

2. HTML Tag - You can select the Html tag for your heading from H2 to H6 or div.

3. Include -

   1. Anchors By Tags - You can select the tags from the list that should be included.

   2. Container - You can restrict the list to include only the tags from a specific container.

4. Exclude -

   1. Anchors By Selector - Enter CSS selectors in comma separated list to be excluded.

5. Marker View - You can choose either numbers or bullets or select an icon from the icon library for the list items.

6. Icon - (only available if Marker View is set to Bullets). You can click the Icon Library to choose an icon or click None to not use any bullet icon.

Additional Options

1. Word Wrap - You can choose this to Yes when you want the list items to wrap when it is bigger and cannot accommodate in one line.

2. Minimize Box - You can select this option to No if you want the table of contents to be expanded and Yes to force the container to click expand.

3. Icon - You can click the Icon Library to choose an icon that will display when the widget is minimized to indicate the user should click to expand the widget. Click None to not display an icon. You can also upload an svg icon.

4. Minimize Icon - You can click the Icon Library to choose an icon that will display when the widget is expanded to indicate the user should click to minimize the widget. Click None to not display an icon. You can also upload an svg icon.

5. Minimized On - (only available if Minimize Box is set to Yes): You can select to minimize on Mobile, Tablet devices or None.

6. Hierarchical View - You can choose Yes to display list items with indention based on Tag hierarchy.

7. Collapse Subitems - (only available if Hierarchical View is set to Yes). You can choose Yes to collapse nested lists and only show top level items.

Style

Box

1. Background Color - You can select the background color for the table of contents box.

2. Border Color - You can select the border color for the table of contents box.

3. Border Width - You can select the border width for the box.

4. Border Radius - You can select the border radius for the box.

5. Padding - You can select the padding for the box.

6. Min Height - You can select the min height for the box.

7. Box Shadow - You can select the box shadow for the box.

Header

1. Background Color - You can select the background color for the header of the table of contents box.

2. Text Color - You can select the text color for the header.

3. Typography - You can select the typography for the Header.

4. Icon Color - You can select the icon color for the expand / minimize icon.

5. Separator width - You can select the width of the header’s border bottom.

List

1. Max Height - You can set the max height for the list items box.

2. Typography - You can select the typography for the list items.

3. Indent - You can set the indentation for sub items.

4. Text Color - You can select the color to be shown for Normal, Hover and Active states.

5. Underline - You can select to show underline for the list items.

6. Marker

7. Color - You can choose the color you want for the list icon.

8. Size - You can also adjust the size of the marker icon.