WordPress Table of Contents Plugin (CMTOC) - Style - Modifying TOC Button (Floating TOC, Show/Hide)


Modifying the Show/hide Table of Contents button

Back to User Guides

The Show/hide button appears by default above and to the right of the Table of Contents. There are several options for this within the WordPress Table of Contents plugin settings.

Example

Show/hide button - WordPress Table of Contents Block
Show/hide button

For these settings, navigate to Admin Dashboard → CM Table of Contents Pro → Settings → Table of Contents tab.

Table of contents settings tab - Add Table of Contents WordPress
Table of contents settings tab

Hide Table of Contents by Default

To hide the TOC by default, under the Default appearance section enable the setting Collapse Table of Contents by default.

Enabling collapsing the TOC by default - Floating Table of Contents WordPress
Enabling collapsing the TOC by default

Appearance of the 'Show/Hide' button

The font size, color and style of Show/hide button can be manipulated inside the Title Style option.

  • Show/hide label alignment - Choose between:
    • Left edge
    • Near the title text
    • Right edge
  • Show/hide toggle styling - Define:
    • Size
    • Color
    • Weight
    • Decoration
    • Style
Show/hide toggle styling settings - WordPress TOC Plugin
Show/hide toggle styling settings

Floating Button

What Is It

The plugin also has a floating TOC option. This persistent button will be seen while the user navigates the content. Clicking it will trigger the TOC, as shown:

Example

Example of the floating TOC - TOC Table of Contents WordPress Plugin
Example of the floating TOC

Settings

Floating TOC settings - WordPress Table of Contents
Floating TOC settings
  • Show Button - Turn on or off.
  • Render button in content area - The TOC button will appear only when the article/post content is visible on screen during scrolling. When the content is out of screen, the  button will disappear.
  • Hide main TOC - Hides the main Table of contents and only shows the floating TOC. Can only work if  "Render button in content area" is enabled.
  • Button Text - Front-End label.
  • Button styling:
    • Background color
    • Text color
    • Opacity
    • Border color
    • Border width
  • Table of contents styling:
    • Text font-size
    • Text color
    • Background color
    • Background opacity
    • Border width
    • Border color
    • Content height
      • Auto - Adapts the height based on the TOC
      • Full Height - Occupies the full page height
    • Contents Position - Where it will appear on the page
      • Top
      • Middle

More information about the WordPress Table of Contents Plugin

Other WordPress products can be found at CreativeMinds WordPress Store

Let us know how we can Improve this Product Documentation Page

To open a Support Ticket visit our support center
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.