Skip to main content

Gatsby: Conditional Table of Contents Display

July 22, 2020
GatsbyReact
Showing or hiding the Table Of Contents, depending on whether it exists or not.
Table of Contents

Intro​

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 {
        title
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      tableOfContents(absolute: false)
      excerpt(pruneLength: 160)
      html
      fields {
        slug
      }
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        categories
        tags
        featuredImage {
          id
          childImageSharp {
            sizes {
              src
            }
          }
        }
      }
    }
  }
`

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 {
      return
    }
  }
  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">
        <h3>Contents</h3>
        <section
        dangerouslySetInnerHTML={{ __html: post.tableOfContents }}
        />
    </div>
</div>

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;
}

Examples​

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

Post with NO TOC

Post with TOC

Comments

Recent Work

Basalt

basalt.software

Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.

Learn More

BidBear

bidbear.io

Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.

Learn More