How to Add a View More Button to the Kadence Table of Contents Block

Wondering how to add a “View More” button to the Kadence Table of Contents block? I’ve been getting this question a lot lately, especially from food bloggers using my food blog themes.

The Kadence Table of Contents block is already such an amazing tool. It makes long blog posts much easier to navigate, boosts your SEO + GEO, and helps readers jump right to the section they’re looking for.

But sometimes when you’ve got a lot of headings, the list can feel a little too long.

The “View More” button isn’t something Kadence includes out of the box, but with a little bit of CSS and JavaScript, we can make it happen! Here’s what we’re going to make:

What You’ll Learn Here

Step 1: Add the CSS

Copy and paste this snippet into Appearance > Customize > Additional CSS or your child theme’s style.css file:

.kb-table-of-content-list li:nth-child(n+4),
.kb-table-of-content-list.js-toc-active li.toc-hidden {
  display: none;
}

.kb-table-of-content-list.js-toc-active li {
  display: list-item;
}

.toc-toggle-wrap {
  margin-top: 1em;
}

.chevron {
  display: inline-block;
  vertical-align: middle;
}

.toc-view-more .chevron {
  transform: rotate(180deg);
}

.toc-see-less .chevron {
  transform: rotate(0deg);
}

/* Button styles */
.toc-toggle-link {
  text-decoration: none;
  color: var(--global-palette3);
  background: var(--global-palette7);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Button hover styles */
.toc-toggle-link:hover {
  color: var(--global-palette3);
  background: var(--global-palette6);
}

What this CSS does:

Step 2: Add the JavaScript

Next, add this Javascript snippet with a custom code plugin (like WPCode):

document.addEventListener("DOMContentLoaded", function () {
	const toc = document.querySelector('.kb-table-of-content-list');
	if (!toc) return;

	const items = toc.querySelectorAll('li');
	if (items.length <= 3) return;

	toc.classList.add('js-toc-active');

	for (let i = 3; i < items.length; i++) {
		items[i].classList.add('toc-hidden');
	}

	const chevronSVG = `
		<svg class="chevron" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
			<polyline points="6 15 12 9 18 15" />
		</svg>
	`;

	const toggleWrap = document.createElement('div');
	toggleWrap.className = 'toc-toggle-wrap';

	const viewMore = document.createElement('a');
	viewMore.href = '#';
	viewMore.className = 'toc-toggle-link toc-view-more';
	viewMore.innerHTML = 'View More <span class="chevron-icon">' + chevronSVG + '</span>';

	const seeLess = document.createElement('a');
	seeLess.href = '#';
	seeLess.className = 'toc-toggle-link toc-see-less';
	seeLess.innerHTML = 'View Less <span class="chevron-icon">' + chevronSVG + '</span>';
	seeLess.style.display = 'none';

	viewMore.addEventListener('click', function (e) {
		e.preventDefault();
		toc.querySelectorAll('.toc-hidden').forEach(el => el.classList.remove('toc-hidden'));
		viewMore.style.display = 'none';
		seeLess.style.display = 'inline';
	});

	seeLess.addEventListener('click', function (e) {
		e.preventDefault();
		for (let i = 3; i < items.length; i++) {
			items[i].classList.add('toc-hidden');
		}
		viewMore.style.display = 'inline';
		seeLess.style.display = 'none';
	});

	toggleWrap.appendChild(viewMore);
	toggleWrap.appendChild(seeLess);
	toc.parentElement.appendChild(toggleWrap);
});

Make sure to save and activate the code.

What this Javascript does:

Step 3: Add the TOC Block

Add a Kadence Table of Contents block to your blog post.

Make sure that under General > Collapsible Settings, the Start Collapsed setting is toggled off.

Want to skip styling the block from scratch? I’ve created a pre-styled Kadence TOC block you can grab for free. Add a paragraph block to your post and where it says “Type / to choose a block or…” paste in this code below:

Copy Code

<!-- wp:kadence/tableofcontents {"uniqueID":"4752_c566b3-6c","allowedHeaders":[{"h1":false,"h2":true,"h3":false,"h4":false,"h5":false,"h6":false}],"linkStyle":"underline_hover","containerPadding":[20,24,20,24],"titleColor":"palette3","titleSize":[20,"",""],"titleLetterSpacing":0,"titleTypography":"var( \u002d\u002dglobal-body-font-family, inherit )","titleFontWeight":"700","titleBorderColor":"","contentColor":"palette3","contentHoverColor":"palette4","contentSize":[16,"",""],"contentLineHeight":[1.6,"",""],"contentLineType":"","contentMargin":["md","0","0","0"],"listGap":[6,"",""],"enableSmoothScroll":true,"borderStyle":[{"top":["palette7","",2],"right":["palette7","",2],"bottom":["palette7","",2],"left":["palette7","",2],"unit":"px"}],"titleBorderStyle":[{"top":["palette9","",0],"right":["palette9","",0],"bottom":["palette9","",0],"left":["palette9","",0],"unit":"px"}]} /-->

Here is what it’ll look like:

Once added, feel free to adjust the block settings and styles!

Styling Tips

At the bottom of the CSS snippet, you’ll see this part:

/* Button styles */
.toc-toggle-link {
  text-decoration: none;
  color: var(--global-palette3);
  background: var(--global-palette7);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Button hover styles */
.toc-toggle-link:hover {
  color: var(--global-palette3);
  background: var(--global-palette6);
}

This is where you can adjust the styling, like the font size, padding, letter spacing, colors, etc.

Kadence global palette colors:

You can swap the numbers (like 3 & 7) to use other colors from your Kadence global color palette (1 through 9).

Or you can use hex codes if you prefer. For example, color: #B19E83;

Want a simpler look?

If you’d rather keep the toggle styled like a regular link, you can delete this entire block of CSS. The button will still work, it just won’t have the extra styling.

Final Thoughts

And that’s it! With just a bit of CSS and JavaScript, you’ve added a handy dandy feature to the Kadence Table of Contents block. Your posts stay clean and organized, while readers can expand the full list whenever they want.