Skip to main content

Gatsby: Conditional Table of Contents Display


Having a Table Of Contents is great for longer articles, but if you include it in your template and you create a short post without a TOC, now you have a blank hole in your template. Here is how you can show or hide the Table of Contents depending on whether it exists or not! The principal is the same as we covered in this article Ncoughlin: React Conditional Styling except we are going to use the class toggle to change the display property of the element.

Template Query

The first step is that we need to include the table of contents into the template query.

export const pageQuery = graphql`
query BlogPostBySlug($slug: String!) {
site {
siteMetadata {
markdownRemark(fields: { slug: { eq: $slug } }) {
tableOfContents(absolute: false)
excerpt(pruneLength: 160)
fields {
frontmatter {
date(formatString: "MMMM DD, YYYY")
featuredImage {
childImageSharp {
sizes {

TOC Checker Function

Then inside of our component we extract our TOC from props and set our TOC to a constant. Then we create a checker function that let's us know whether there is anything in the Table Of Contents at all!

const BlogPostTemplate = ({ data }) => {

const toc = data.markdownRemark.tableOfContents

// check for TOC and if blank insert noToc class into template
// noToc class is set to display none
const checkTOC = () => {
if (toc.length === 0) {
return "noToc"
} else {
const tocDisplay = checkTOC()

Conditional Class

and then the result of our checkTOC function gets placed into our JSX. If there is no Table Of Content the class noToc will be added to the wrapping div.

<div className={`toc ${tocDisplay}`}>
<div className="toc-wrapper">
dangerouslySetInnerHTML={{ __html: post.tableOfContents }}

Display None for Conditional Class

You can probably guess what is happening next. Heading over to our stylesheet for the TOC we simply set display to none for the noToc class.

.noToc {
display: none;


And just to show you that this is working here are some sample.

Post with NO TOC

Post with TOC

Automated Amazon Reports

Automatically download Amazon Seller and Advertising reports to a private database. View beautiful, on demand, exportable performance reports.