Playground

Automatic Table of Contents

← Back to Playground

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi non arcu risus quis varius quam quisque. Nibh tortor id aliquet lectus proin nibh nisl condimentum. Eget aliquet nibh praesent tristique. Convallis aenean et tortor at risus viverra adipiscing. Proin libero nunc consequat interdum. Integer vitae justo eget magna fermentum iaculis eu non diam. Pharetra vel turpis nunc eget. Enim blandit volutpat maecenas volutpat blandit aliquam etiam.

Nulla aliquet porttitor lacus luctus accumsan tortor posuere.

Magna sit amet purus gravida. Et netus et malesuada fames ac turpis egestas integer eget. Lacinia at quis risus sed. Cras tincidunt lobortis feugiat vivamus at. Adipiscing at in tellus integer feugiat scelerisque varius morbi enim. Porttitor massa id neque aliquam vestibulum. Tellus elementum sagittis vitae et. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat. Tempor commodo ullamcorper a lacus.

Consectetur a erat nam at lectus urna duis convallis.

A erat nam at lectus urna duis convallis. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Amet consectetur adipiscing elit duis. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Nec ultrices dui sapien eget mi proin sed. Congue mauris rhoncus aenean vel elit scelerisque.

Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.

In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Ullamcorper velit sed ullamcorper morbi. Mattis aliquam faucibus purus in massa tempor. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. Nec sagittis aliquam malesuada bibendum arcu. Dui sapien eget mi proin sed libero enim. Semper auctor neque vitae tempus quam pellentesque nec. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor.

Tellus mauris a diam maecenas sed enim ut sem.

Enim ut sem viverra aliquet eget sit amet tellus cras. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Vel orci porta non pulvinar neque laoreet. Facilisis gravida neque convallis a cras.


Notes
  • Requires JQuery
  • Include the .post and .post-content classes in your wrapping divs
  • Include this JavaScript after the JQuery include
var toc = $('<ul class="mb-5"></ul>').addClass("toc");
var el, title, link;

$(".post .post-content h3").each(function() {

  // Prepare the heading to become a link. Remove any special characters, replace spaces with dashes, change to lowercase
  var hyphenated=$(this).text().replace(/[^a-zA-Z0-9 ]/g, '')
  .replace(/\s/g, '-').toLowerCase();

  // Convert the heading to its link version
  $(this).attr('id', hyphenated);

  // Create variables for text and link version
  el = $(this);
  title = el.text();
  link = "#" + el.attr("id");

  // Create a list item using the text and link
  // Change the link class to your own
  newLine =
    "<li>" + "<a class='graaay' href='" + link + "</a>" + title + "</a>" + "</li>";

  // Add list item to table of contents
  toc.append(newLine);

});

// Add heading to table of contents section
toc.prepend('<h4>In this post:</h4>');
$('.post .post-content').prepend(toc);

// Scroll to links in post
toc.find('a').on('click', function() {
  var $el = $(this),
  id = $el.attr('href');

  $(('html, body').animate({
    scrollTop: $(id).offset().top
  }, 500);

  return false;
});