Table of Contents Element

The Table of Contents Element will help you organize and order your content automatically based on the HTML tags of your content from H1 to H6. The element automatically orders content, although you still have plenty of room to control the display of your table of contents as well as design it as per your desire to match your site's style. 

Content Tab 

Table of Contents

1. Title - Here you can type in the title that will be displayed at the top of the table of content 
2. HTML Tag - Set the HTML tag for the title from H2 to H6 or div. 

INCLUDE | EXCLUDE

INCLUDE

1. Anchor by Tags - Choose which of the HTML tags will the table of contents automatically include
2. Container - This setting will restrict the Table of Content to heading elements when added a specific container 

EXCLUDE 

1. Anchors By Selector - Here you can exclude CSS selectors, each selector must be divided by a comma 

1. Marker View - This option will allow you to add a number or bullet in front of a table of contents item
2. Icon - If you select the bullet as your marker view, you can choose to be displayed 

Additional Options 

1. Word Wrap - Switch the handle on to allow the text to be wrapped when the column width will not show the item in one line 
2. Minimize Box - Switch the handle on for the table of contents to be minimized and only expanded when users click upon it. If you set it to NO, then the table of content will be fully expanded. 
3. Icon - Choose an Icon from the Icon library to display when the table of content is minimized and indicate that the user should click upon it to expand it. You can also upload your own SVG icon or choose None to show no icon.
4. Minimize Icon -  Choose an Icon from the Icon library to display when the table of content is fully expanded and indicate that the user should click upon it to minimize it. You can also upload your own SVG icon or choose None to show no icon.
5. Minimize On - The option is only available if you set the Minimize Boc option on and will give you the possibility to choose the breakpoint at what device the table of content will be minimized. 
6. Hierarchical View - Switch the handle on to show items on the Table of Content organized based upon Tag hierarchy
7. Collapse Subitems - This option will allow you to collapse subitems in the table of content and only show the main items. This option will be most useful when you add a sticky table of contents. 

Style Tab

Box

1. Background Color - Set a background color for the table of contents 
2. Border Color - Add a border-color 
3. Border Width - Set the value for the border width
4. Border Radius - Set the border-radius for the box to have the edges be rounded
5. Padding - Add padding values around the box 
6. Min Height - Set the minimum height of the element
7. Box Shadow - Set a box-shadow for the box

Header 

1. Background Color - Set a background color for the header of the table of contents
2. Text Color - Set a text color for the header of the table of contents
3. Typography - Tweak the typography options for the header of the table of contents
4. Icon Color - Set a color for the icon to either minimize or expand the table of content
5. Separator Width - Set the width for the border at the bottom of the header of the table of contents

List 

1. Typography - Tweak the typography options for the text inside the table of contents 
2. Indent - Set the space between the items on the table of contents

NORMAL | HOVER | ACTIVE 

1. Text Color - Set the color for the text inside the table of contents 
2. Underline - Switch the handle on to show an underline for the text inside the table of contents 

MARKER

1. Color - Set the color for the marker 
2. Size - Set the size of the marker

Set the settings for the Advanced Tab that is appropriate for the element.