Table of Contents
Magically generate a gorgeous table of contents for your articles using the heading tags within the rich text block. It can be used on CMS Template or Static pages.
Instructions
Firstly, make sure you have the VisualDX script in your <head>. Checkout the Quick Start for how to do this.
Add a rich-text-field to your page, and give it an attribute of vdx-toc-article
Add a list element to your page, and give it an attribute of vdx-toc-list
Add a text-link or link-block inside each list-item
Give each list-item an attribute that relates to the heading tag you wish it to represent.
- for the H1 tag use vdx-toc-h1
- for the H2 tag use vdx-toc-h2
- for the H3 tag use vdx-toc-h3
- for the H4 tag use vdx-toc-h4
- for the H5 tag use vdx-toc-h5
- for the H6 tag use vdx-toc-h6
For example, add the vdx-toc-h2 attribute to the list-item you would like to represent the <h2> tags in your article.
Now you can style both your list-item and text-link / link-block. Feel free to give each tag a different style e.g. you could indent the <h3> tags a little.
We tend to use combo classes such as:
toc_list-item for-h2
toc_list-item for-h3
toc_list-item for-h4
Publish your site to staging and test out both the styles and the behaviour.
An example of the TOC in action
Ensuring Accessibility with JavaScript in Webflow
Accessibility is essential for reaching all users. This article discusses how to ensure accessibility when using JavaScript in Webflow.
Understanding Accessibility
Accessibility involves making your website usable for people with disabilities. JavaScript can impact accessibility if not used correctly.
Best Practices for Accessible JavaScript
Ensure that all interactive elements are keyboard accessible and provide alternative text for dynamic content.
"Accessibility is not just a feature; it's a necessity."
Testing for Accessibility
Use tools to test your website's accessibility and make necessary adjustments.