How to add an Avada table of contents toggle [TOC] using JavaScript & CSS

We use Avada at Portside for small business websites because it’s quick to launch, flexible, and easy for clients to manage day-to-day. With solid performance, sensible design controls, and no lock-ins, it’s a reliable base we can customise to fit each brand.

What this solution does: Add a small script that inserts a ‘Show / Hide contents’ toggle button before the Avada table of contents element (TOC) list that remembers user clicks, and auto-collapses the table of contents on small screens. A few lines of CSS hide the TOC when collapsed and style the button.

Why add a toggle?

• Cleaner mobile UX. Long TOCs can dominate above-the-fold on phones.
• Faster scanning. Let your readers reveal the post contents on demand.
• Accessibility. Proper aria-expanded states give screen-reader users a clear signal.
• SEO hygiene. Less layout shift and a tidier first impression can help engagement.

What you’ll add to make it work

1. A tiny script that:

• Finds your Avada TOC data-awb-toc-id
• Injects a button labelled ‘Show contents’ / ‘Hide contents’
• Collapses by default on viewports ≤ 500px
• Remembers if a user manually toggled
• Keeps the aria-expanded state in sync.

2. A couple of CSS rules that:

• Hide the TOC list when collapsed,
• Style the toggle button so you can brand it.

You’ll paste the JavaScript and CSS into your preferred Avada locations (I’ll show you where below).

Step-by-step: Adding the toggle

Confirm your TOC ID

Avada’s TOC element renders as .awb-toc-el and includes a data-awb-toc-id. In this guide we target data-awb-toc-id=”1″. If yours is different, change the ID in the script.

What the script does

• Waits for DOMContentLoaded
• Safely exits if the TOC or its content wrapper isn’t present
• Injects a button class=”toc-toggle” type=”button” Button before the TOC list
• Sets initial collapsed state using matchMedia(‘(max-width: 500px)’)
• Optionally syncs when the viewport crosses 500px later
• Toggles is-collapsed on the TOC container and updates aria-expanded

Adding the CSS

• The state rule that hides the TOC when collapsed
• The button styles you can customise to your brand

Javascript for adding a custom Avada table of contents toggle

Where to add the javascript in Avada

You can paste the javascript in the advanced section of your Avada theme options if you want it to run for the entire website.

The Avada Global Options lets you add javascript sitewide.

If you just want it to run on a single page, post or template you can paste it in ‘code fields’ section in the builder options.

In any Avada post or page with the builder on there is a ‘code fields’ section in the builder options.

Adding the CSS for styling the Avada table of contents toggle

There’s only 2 lines of CSS needed to make the Avada table of contents toggle work. Place in the page or in the Avada Theme options.

• Avada → Options → Custom CSS
• Page-level Custom CSS if you only want it on one post.

Tip: If you use optimisation plugins (minify/combine/defer), exclude this snippet if it’s being moved before the TOC exists. The script already waits for DOMContentLoaded, but aggressive deferral can still shuffle order.

Styling the toggle button with CSS

Tweak the .toc-toggle rule to match your brand colours, padding, and focus outline. Consider a visible :focus style for keyboard users. Below i’ve styled it for our website.

How the JavaScript toggle for Avada TOC works

• DOM targeting: The script grabs the Avada TOC via .awb-toc-el [data-awb-toc-id=”1″] and its inner .awb-toc-el__content (the list).
• Progressive enhancement: If the TOC isn’t found, nothing breaks.
• Button injection: A semantic Button gets inserted before the list. No markup edits required.
• State class: Toggling is-collapsed on the TOC container controls visibility via CSS.
• Responsive default: On load, the TOC collapses if the viewport is ≤ 500px—great for phones.
• User intent respected: If the reader clicks the toggle, we store a lightweight flag (data-user-toggled) so later viewport changes won’t override their choice.
• A11y signals: The button text and aria-expanded update on every toggle, so assistive tech always knows whether the contents are shown.

SEO and performance notes

• Engagement signals: A cleaner fold on mobile can reduce bounce and improve reading engagement.
• CLS: Hiding a large TOC by default can reduce layout shift as content below is more stable at load.
• Crawlability: The TOC is still in the HTML; you’re not removing content, just toggling visibility.
• Cache/CDN: This is static JS/CSS—plays nicely with page caching.

Useful links

• https://avada.com/documentation/table-of-contents-element/
• https://wordpress.org/support/topic/avada-theme-table-of-contents-toggle/
• https://avada.com/element/table-of-contents/
• https://www.portside.wales/services/seo/technical/